V3Layer 基于vue3.0构建的多功能PC网页端弹窗组件。拥有超过10+种弹窗类型、30+种参数配置，支持拖拽(自定义拖拽区域)、缩放、最大化、全屏及自定义置顶层叠等功能。

nerror="javascript:errorimg.call(this);">

快速引入

在main.js中引入v3layer组件。

import { createApp } from 'vue'import App from './App.vue'// 引入Element-Plus组件库import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'// 引入弹窗组件v3layerimport V3Layer from './components/v3layer'createApp(App).use(ElementPlus).use(V3Layer).mount('#app')

nerror="javascript:errorimg.call(this);">

当弹窗类型为 message | notify | popover，调用方法如下：

v3layer.message({...})v3layer.notify({...})v3layer.popover({...})

nerror="javascript:errorimg.call(this);">

v3layer支持如下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支持自定义拖拽区域 (drag:'#aaa')，拖动到窗口外 (dragOut:true)。支持iframe弹窗类型 (type:'iframe')。

配置 topmost:true 当前窗口会保持置顶。

nerror="javascript:errorimg.call(this);">

nerror="javascript:errorimg.call(this);">

ok，基于vue3.0开发pc端对话框组件就分享到这里。希望对大家有所帮助哈！