Vue.js自定义PC版模态框组件|vue layer弹层

介绍

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/
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。