介绍
vlayer 一款基于vue.js构建的桌面端弹框组件。集合了 alert|dialog|modal|msg|notify|popover|toast|actionsheet 等多种功能于一身。
基于vue.js构建pc端弹窗组件|仿layer弹框插件
快速上手
在main.js中全局引入vlayer组件。
import VLayer from './components/vlayer';
Vue.use(VLayer);
标签式写法
<v-layer
v-model="isConfirm"
title="标题内容"
content="<div style='color:#06f;padding:15px;'>弹窗内容信息！</div>"
xclose
z-index="2002"
lockScroll="false"
resize
dragOut
:btns="[
{text: '取消', click: () => isConfirm=false},
{text: '确定', style: 'color:#f90;', click: handleFn},
]"
/>
函数式写法
let $el = this.$vlayer({
title: '标题内容',
content: '<div style='color:#06f;padding:15px;'>弹窗内容信息！</div>',
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.vue模板
<template>
<div v-show="opened" class="vui__layer" :class="{'vui__layer-closed': closeCls}" :id="vlayerId">
<div v-if="JSON.parse(shade)" class="vlayer__overlay" @click="shadeClicked" :style="{opacity}"></div>
<div class="vlayer__wrap" :class="[''+anim, type&&'popui__'+type, drawer&&'popui'+drawer, xclose&&'vlayer-closable', tipArrow]" :style="layerStyle">
<div v-if="title" class="vlayer__wrap-tit" v-html="title"></div>
<div v-if="type=='toast'&&icon" class="vlayer__toast-icon" :class="['vlayer'+icon]" v-html="toastIcon[icon]"></div>
<div class="vlayer__wrap-cntbox">
<template v-if="$slots.content">
<div class="vlayer__wrap-cnt"><slot name="content" /></div>
</template>
<template v-else>
<template v-if="content">
<iframe v-if="type=='iframe'" scrolling="auto" allowtransparency="true" frameborder="0" :src="content"></iframe>
<!-- message|notify|popover -->
<div v-else-if="type=='message' || type=='notify' || type=='popover'" class="vlayer__wrap-cnt">
<i v-if="icon" class="vlayer-msg__icon" :class="icon" v-html="messageIcon[icon]"></i>
<div class="vlayer-msg__group"><div v-if="title" class="vlayer-msg__title" v-html="title"></div><div class="vlayer-msg__content" v-html="content"></div></div>
</div><div v-else class="vlayer__wrap-cnt" v-html="content"></div>
</template>
</template>
<slot />
</div>
<div v-if="btns" class="vlayer__wrap-btns">
<span v-for="(btn,index) in btns" :key="index" class="btn" :class="{'btn-disabled': btn.disabled}" :style="btn.style" v-html="btn.text"></span>
</div>
<span v-if="xclose" class="vlayer__xclose" :class="!maximize&&xposition" :style="{'color': xcolor}" @click="close"></span>
<span v-if="maximize" class="vlayer__maximize"></span>
<span v-if="resize" class="vlayer__resize"></span>
</div>
<!-- 修复拖拽卡顿 -->
<div class="vlayer__dragfix"></div>
</div>
</template>
默认标题是拖拽区域，当然也可以自定义拖拽元素，只需设置 drag: '#xxx' 或者设置drag: false 来禁止弹窗拖拽功能。
当设置 dragOut: true 窗体可以拖拽到浏览器外部。
当使用popover弹窗，需要传入follow: '#xxxx' 定位元素。
另外还支持自定义弹窗显示位置，只需配置position即可。
<!-- 自定义弹窗位置 -->
<v-layer v-model="showPosition" xclose maximize drag=".dragImg" :position="rb">
<img class="dragImg" src="xxx.jpg" />
</v-layer>
设置fullscreen: true会全屏显示弹窗。
okay，基于vue.js开发pc端弹窗插件就分享到这里。希望对大家有所帮助哈！✍✍
链接：https://juejin.im/post/6890442763041669127/
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
