介绍
vlayer 一款融合Alert|Dialog|Modal|Message|Notify|Popover|Toast|ActionSheet等众多功能的桌面端弹出框组件。在设计开发之初，参考借鉴了Layer弹层插件、antd及iView等组件库。
快速开始
在main.js中引入弹窗组件。
import VLayer from './components/vlayer';
Vue.use(VLayer);提供了标签式和函数式2种可供选择的调用方式。
由于vlayer挂载了全局函数，支持函数式写法。
let $el = this.$vlayer({
title: '标题内容',
content: '弹窗内容信息！',
xclose: true,
zIndex: 2002,
lockScroll: false,
resize: true,
dragOut: true,
btns: [
{text: '取消', click: () => { $el.close(); }},
{text: '确定', click: () => this.handleFn()},
]
});效果预览
参数配置
vlayer支持多达30+种参数任意配置。
@@默认参数
v-model 当前组件是否显示
title 标题
content 内容（支持自定义插槽内容）
type 弹窗类型（toast | footer | actionsheet | android/ios | contextmenu | drawer | iframe | message/notify/popover）
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）
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）
resize 是否允许拉伸尺寸（默认false）
btns 弹窗按钮（参数：text|style|disabled|click）
------------------------------------------
@@组件式事件
open 打开弹出层时触发（@open="xxx"）
close 关闭弹出层时触发（@close="xxx"）
------------------------------------------
@@函数式事件
onOpen 打开弹窗回调
onClose 关闭弹窗回调vlayer弹窗模板
下面贴出的是js主要实现功能。
/**
* @Desc vue自定义对话框组件VLayer
* @Time andy by 2020-10-28
* @About Q：282310962 wx：xy190310
*/
默认是标题区可以拖拽的，当然也可以自定义拖拽元素，只需设置 drag: '#xxx' 或者设置drag: false 来禁止弹窗拖拽功能。
当设置 dragOut: true 窗体可以拖拽到浏览器外部。
当使用popover弹窗，需要传入follow: '#xxxx' 定位元素。
let $follow = this.$vlayer.popover({
follow: '#popover',
icon: 'warning',
content: '这是一段内容确定删除吗？',
time: null,
xclose: false,
btns: [
{text: 'no', click: () => { $follow.close(); }},
{text: 'yes', click: () => this.handleXXX()},
],
onClose: function() {
this.$vlayer.message({content: 'success closed', icon: 'success'})
}
});另外还支持自定义弹窗显示位置，默认是auto居中（['150px','100px'] | t | r | b | l | lt | rt | lb | rb）
当需要一打开弹窗就全屏，只需配置fullscreen:true即可。
ok，基于vue.js开发桌面端弹框就分享到这里。希望大家能喜欢~~ ✍
