dialog弹窗关不掉 vue_vue.js自定义桌面PC端弹窗组件VLayer

前段时间有给大家分享一个vue.js移动端弹框组件。今天再分享一个最新开发的vue pc端自定义轻量级对话框组件VLayer。

vlayer 一款基于vue.js构建的网页弹窗组件。集Alert、Dialog、Message、Notification、ActionSheet、Toast、Popover、Popconfirm等众多功能于一体。通过精巧的逻辑、布局解决复杂的弹框功能。

引用组件

// 在main.js中引入组件import VLayer from './components/vlayer';Vue.use(VLayer);

vlayer同样支持标签式和函数式2种混合调用方式。

• 标签式写法

<v-layer     v-model="showConfirm"    title="标题内容"    content="

这里是内容信息！

" xclose z-index="2001" lockScroll="false" resize dragOut :btns="[ {text: '关闭', click: () => showConfirm=false}, {text: '确认', style: 'color:#f90;', click: handleXXX}, ]"/>

• 函数式写法

let $vlayero = this.$vlayer({    title: '标题内容',    content: '

这里是内容信息！

', xclose: true, zIndex: 2001, lockScroll: false, resize: true, dragOut: true, btns: [ {text: '关闭', click: () => { $vlayero.close(); }}, {text: '确认', click: () => this.handleXXX()}, ]});

编码实现

vlayer支持如下参数混合配置。

@@Propsv-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)------------------------------------------@@$emitopen        打开弹出层时触发(@open="xxx")close       关闭弹出层时触发(@close="xxx")------------------------------------------@@EventonOpen      打开弹窗回调onClose     关闭弹窗回调

vlayer组件模板

<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-'+anim, type&&'popui__'+type, drawer&&'popui__drawer-'+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__toast-'+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>                        <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" @click="btnClicked($event,index)" 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" @click="maximizeClicked($event)">span>      <span v-if="resize" class="vlayer__resize">span>    div>        <div class="vlayer__dragfix">div>  div>template>

/** * @Desc  Vuejs自定义桌面端弹窗组件VLayer */  import domUtils from './utils/dom'  let $index = 0, $lockCount = 0, $timer = {};  let ie = !!window.ActiveXObject || "ActiveXObject" in window;  export default {    props: {      // ...    },    data() {      return {        opened: false,        closeCls: '',        toastIcon: {          // ...        },        messageIcon: {          // ...        },        vlayerOpts: {},        tipArrow: null,      }    },    mounted() {      window.addEventListener('resize', () => {        this.autopos();      })    },    computed: {      vlayerId() {        return this.id ? this.id : `vlayer-${domUtils.generateId()}`;      }    },    watch: {      value(val) {        const type = val ? 'open' : 'close';        this[type]();      },    },    methods: {      // 打开弹窗      open() {        if(this.opened) return;        this.opened = true;        this.$emit('open');        typeof this.onOpen === 'function' && this.onOpen();        const dom = this.$el;        this.$nextTick(() => {          document.body.appendChild(dom);                    this.auto();        })                this.callback();      },      // 关闭弹窗      close() {        if(!this.opened) return;        let dom = this.$el;        let vlayero = dom.querySelector('.vlayer__wrap');        let ocnt = dom.querySelector('.vlayer__wrap-cntbox');        let omax = dom.querySelector('.vlayer__maximize');                this.closeCls = true;        setTimeout(() => {          this.opened = false;          this.closeCls = false;          if(this.vlayerOpts.lockScroll) {            $lockCount--;            if(!$lockCount) {              document.body.style.paddingRight = '';              document.body.classList.remove('nt-overflow-hidden');            }          }          if(this.time) {            $index--;          }          // 清除弹窗样式          vlayero.style.width = vlayero.style.height = vlayero.style.top = vlayero.style.left = '';          ocnt.style.height = '';          omax && omax.classList.contains('maximized') && omax.classList.remove('maximized');          this.vlayerOpts.isBodyOverflow && (document.body.style.overflow = '');          this.$emit('input', false);          this.$emit('close');          typeof this.onClose === 'function' && this.onClose();        }, 200);      },      // 弹窗位置      auto() {        // ...        this.autopos();        // 全屏弹窗        if(this.fullscreen) {          this.full();        }        // 弹窗拖动|缩放        this.move();      },      autopos() {        if(!this.opened) return;        let oL, oT;        let pos = this.position;        let isFixed = JSON.parse(this.fixed);        let dom = this.$el;        let vlayero = dom.querySelector('.vlayer__wrap');                let area = [domUtils.client('width'), domUtils.client('height'), vlayero.offsetWidth, vlayero.offsetHeight]                oL = (area[0] - area[2]) / 2;        oT = (area[1] - area[3]) / 2;        if(this.follow) {          this.offset();        }else {          typeof pos === 'object' ? (            oL = parseFloat(pos[0]) || 0, oT = parseFloat(pos[1]) || 0          ) : (            // ...          )          vlayero.style.left = parseFloat(isFixed ? oL : domUtils.scroll('left') + oL) + 'px';          vlayero.style.top = parseFloat(isFixed ? oT : domUtils.scroll('top') + oT) + 'px';        }      },      // 元素跟随定位      offset() {        let oW, oH, pS;        let dom = this.$el;        let vlayero = dom.querySelector('.vlayer__wrap');        oW = vlayero.offsetWidth;        oH = vlayero.offsetHeight;        pS = domUtils.getFollowRect(this.follow, oW, oH);        this.tipArrow = pS[2];                vlayero.style.left = pS[0] + 'px';        vlayero.style.top = pS[1] + 'px';      },      // 最大化弹窗      full() {        let timer;        let isFixed = JSON.parse(this.fixed);        let dom = this.$el;        let vlayero = dom.querySelector('.vlayer__wrap');        let otit = dom.querySelector('.vlayer__wrap-tit');        let ocnt = dom.querySelector('.vlayer__wrap-cntbox');        let obtn = dom.querySelector('.vlayer__wrap-btns');        let omax = dom.querySelector('.vlayer__maximize');                let t = otit ? otit.offsetHeight : 0;        let b = obtn ? obtn.offsetHeight : 0;        let rect = [          parseFloat(domUtils.getStyle(vlayero, 'left')), parseFloat(domUtils.getStyle(vlayero, 'top')),          parseFloat(domUtils.getStyle(vlayero, 'width')), parseFloat(domUtils.getStyle(vlayero, 'height'))||vlayero.offsetHeight        ]        this.vlayerOpts.rect = rect;                clearTimeout(timer);        timer = setTimeout(() => {          vlayero.style.left = isFixed ? 0 : domUtils.scroll('left') + 'px';          vlayero.style.top = isFixed ? 0 : domUtils.scroll('top') + 'px';          vlayero.style.width = domUtils.client('width') + 'px';          vlayero.style.height = domUtils.client('height') + 'px';          ocnt.style.height = domUtils.client('height') - t - b + 'px';        }, 16);      },      // 恢复弹窗      restore() {        let dom = this.$el;        let vlayero = dom.querySelector('.vlayer__wrap');        let otit = dom.querySelector('.vlayer__wrap-tit');        let ocnt = dom.querySelector('.vlayer__wrap-cntbox');        let obtn = dom.querySelector('.vlayer__wrap-btns');        let omax = dom.querySelector('.vlayer__maximize');        let t = otit ? otit.offsetHeight : 0;        let b = obtn ? obtn.offsetHeight : 0;                vlayero.style.left = parseFloat(this.vlayerOpts.rect[0]) + 'px';        vlayero.style.top = parseFloat(this.vlayerOpts.rect[1]) + 'px';        vlayero.style.width = parseFloat(this.vlayerOpts.rect[2]) + 'px';        vlayero.style.height = parseFloat(this.vlayerOpts.rect[3]) + 'px';        ocnt.style.height = parseFloat(this.vlayerOpts.rect[3]) - t - b + 'px';      },      // 拖动|缩放弹窗      move() {        // ...      },      // 事件处理      callback() {        // 倒计时关闭        if(this.time) {          $index++;          // 防止重复点击          if($timer[$index] !== null) clearTimeout($timer[$index])          $timer[$index] = setTimeout(() => {            this.close();          }, parseInt(this.time) * 1000);        }      },      // 点击最大化按钮      maximizeClicked(e) {        let o = e.target;        if(o.classList.contains('maximized')) {          // 恢复          this.restore();        } else {          // 最大化          this.full();        }      },      // 点击遮罩层      shadeClicked() {        if(JSON.parse(this.shadeClose)) {          this.close();        }      },      // 按钮事件      btnClicked(e, index) {        let btn = this.btns[index];        if(!btn.disabled) {          typeof btn.click === 'function' && btn.click(e)        }      },    },  }</script>

默认标题区可以拖拽，也可以自定义拖拽抓手。设置 drag: '#xxx'，或者 drag: false 禁止拖拽。

<v-layer     v-model="showDragable"     title="拖放弹窗"     xclose     maximize     :area="['', '580px']"     drag="#dragGuesture"     dragOut>    <div slot="content">        <p id="dragGuesture" style="padding:30px;">            <span style="background:#ff0;color:#00e0a1;">我是自定义拖拽抓手 drag:'#dragGuesture' <br>拖动我试一试！<br>            <em style="color:red;">设置drag:false可禁止拖拽！em><br>            <em style="color:red;">设置dragOut:true可拖拽到窗口外！em>            span>        p>        <img @click="handleInfo" src="xxx.jpg" style="max-width:100%;" />    div>v-layer>

当弹窗类型为message、notify、popover时，则需要使用如下的调用方式。

this.$vlayer.message('这是一条提示信息');this.$vlayer.message({content: '这是一条成功的提示', icon: 'success'});this.$vlayer.message({content: ' 这是一条错误的提示', icon: 'error', layerStyle: 'background:#ffefe6;color:#ff3838;margin-top:15px;'});

this.$vlayer.notify({title: '成功', content: '这是一条成功的提示', icon: 'success'});

this.$vlayer.popover({    follow: '#popover4',    icon: 'warning',    content: '这是一段内容确定删除吗？',     time: null,     xclose: false,    btns: [        {text: 'no', click: () => { ... }},        {text: 'yes', click: () => this.handleXXX()},    ],    onClose: function() {        this.$vlayer.message({content: 'success closed', icon: 'success'})    }});

还支持iframe弹窗类型，设置 type: 'iframe'，content传入网址即可。

ok，以上就是基于vue.js开发pc弹窗的介绍。希望大家能喜欢~~