关于vue.js:基于vue-pc端模态框组件vue-layer弹窗

介绍

vlayer 一款交融 Alert|Dialog|Modal|Message|Notify|Popover|Toast|ActionSheet 等泛滥性能的桌面端弹出框组件。在设计开发之初，参考借鉴了 Layer 弹层插件、antd 及 iView 等组件库。

疾速开始

在 main.js 中引入弹窗组件。

import VLayer from './components/vlayer';
Vue.use(VLayer);

提供了 标签式 和函数式 2 种 可供选择的调用形式。

<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},
    ]"
/>

因为 vlayer 挂载了全局函数，反对函数式写法。

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 弹窗模板

<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>
            <!-- 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>

上面贴出的是 js 次要实现性能。

/**
 * @Desc     vue 自定义对话框组件 VLayer
 * @Time     andy by 2020-10-28
 * @About    Q：282310962  wx：xy190310
 */
<script>
  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--;}

          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 来禁止弹窗拖拽性能。

当设置 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）

<!-- 自定义弹窗地位 -->
<v-layer v-model="showPosition" xclose maximize drag=".dragImg" :position="rb">
    <img class="dragImg" src="xxx.jpg" />
</v-layer>

当须要一关上弹窗就全屏，只需配置 fullscreen:true 即可。

ok，基于 vue.js 开发桌面端弹框就分享到这里。心愿大家能喜爱~~ ✍????