前段时间有给大家分享一个vue3手机端弹框组件。今天带来的是最新开发的Vue3桌面端自定义layer弹出层组件。
[V3Layer]基于vue3.x构建的自定义仿layer.js弹窗组件。
支持30+自定义参数配置、8+弹窗类型、7+动画效果
在功能及效果上基本和之前[vue2版]高度保持一致。
// 在main.js中全局引入组件
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 引入Element-Plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
// 引入弹窗组件v3layer
import Vue3Layer from './components/v3layer'
app.use(ElementPlus)
app.use(Vue3Layer)
app.mount('#app')
支持如下30+种参数混合搭配，实现各种弹窗效果。
|props参数|
v-model 是否显示弹框
id弹窗唯一标识
title 标题
content 内容（支持String、带标签内容、自定义插槽内容）***如果content内容比较复杂，推荐使用标签式写法
type 弹框类型（toast|footer|actionsheet|actionsheetPicker|android|ios|contextmenu|drawer|iframe）
layerStyle 自定义弹窗样式
icon toast图标（loading | success | fail）
shade 是否显示遮罩层
shadeClose 是否点击遮罩时关闭弹窗
lockScroll 是否弹窗出现时将body滚动锁定
opacity 遮罩层透明度
xclose 是否显示关闭图标
xposition关闭图标位置（left | right | top | bottom）
xcolor 关闭图标颜色
anim 弹窗动画（scaleIn | fadeIn | footer | fadeInUp | fadeInDown | fadeInLeft | fadeInRight）
position 弹出位置（auto | ['100px','50px'] | t | r | b | l | lt | rt | lb | rb）
drawer 抽屉弹窗（top | right | bottom | left）
follow 跟随元素定位弹窗（支持元素.kk #kk 或 [e.clientX, e.clientY]）
time 弹窗自动关闭秒数（1、2、3）
zIndex 弹窗层叠（默认8080）
teleport 指定挂载节点（默认是挂载组件标签位置，可通过teleport自定义挂载位置） teleport="body | #xxx | .xxx"
topmost 置顶当前窗口（默认false）
area 弹窗宽高（默认auto）设置宽度area: '300px' 设置高度area:['', '200px'] 设置宽高area:['350px', '150px']
maxWidth 弹窗最大宽度（只有当area:'auto'时，maxWidth的设定才有效）
maximize 是否显示最大化按钮（默认false）
fullscreen 全屏弹窗（默认false）
fixed 弹窗是否固定
drag 拖拽元素（可定义选择器drag:'.xxx' | 禁止拖拽drag:false）
dragOut 是否允许拖拽到窗口外（默认false）
lockAxis 限制拖拽方向可选: v 垂直、h 水平，默认不限制
resize 是否允许拉伸尺寸（默认false）
btns 弹窗按钮（参数：text|style|disabled|click）
++++++++++++++++++++++++++++++++++++++++++++++
|emit事件触发|
success 层弹出后回调（@success="xxx"）
end 层销毁后回调（@end="xxx"）
++++++++++++++++++++++++++++++++++++++++++++++
|event事件|
onSuccess层打开回调事件
onEnd 层关闭回调事件
支持丝滑般无卡顿 拖拽、缩放、最大化及全屏 效果。
编码开发v3layer组件模板
v3layer核心逻辑处理片段
全部采用vue3.0语法编写，目的是快速适应vue3开发。
大家如果感兴趣，也可以去试一试哈。
另外，vue3.0中将弹窗实例挂载到body上可通过 createApp 或 createVNode 实现。大家感兴趣也可以看看之前分享的一篇文章。
ok，使用Vue3开发pc端弹窗就分享到这里。希望对大家有所帮助！
最后如果你觉得这篇文章对你有所启发或帮助，还可以：
- 转发/点赞，让更多的人也能看到这篇分享。
- 加关注、不迷路，不定期分享原创技术知识。
- 也看看其它历史文章。
