基于Vue自定义模态框|vue仿微信弹窗|nuxt对话框

3,879 阅读1分钟

起源

这段时间一直在进行Nuxt.js项目开发,项目中有很多地方都需要用到弹层功能,本来想着直接使用Vant组件库,不想重复造轮子。后面由于多方面的考虑,决定还是自己重新开发一个,于是就有了Vue自定义弹窗VPopup

VPopup 基于Vue.js构建的移动端弹出框组件。融汇了_Vant_及_NutUI_中的Popup弹出层、Notify通知信息、Dialog对话框、ActionSheet动作面板框及Toast弱提示框等功能。

使用组件

在main.js中全局引入组件

import Popup from './components/popup' 

Vue.use(Popup)

vpopup同时支持标签式函数式两种调用方式。

<!-- 标签式调用 -->
<template>
    <view id="root">
        ...

        <!-- VPopup模板 -->
        <v-popup 
            v-model="showDialog" 
            anim="scaleIn" 
            title="标题"
            content="弹窗内容,描述文字尽量控制在三行内!" 
            shadeClose="false" 
            xclose
            :btns="[
                {...},
                {...},
            ]"
        />
    </view>
</template>

<!-- 函数式调用 -->
<script>
    export default {
        ...
        methods: {
            handleShowDialog() {
                let $el = this.$vpopup({
                    title: '标题',
                    content: '弹窗内容,描述文字尽量控制在三行内!',
                    anim: 'scaleIn',
                    shadeClose: false,
                    xclose: true,
                    onOpen: () => {
                        console.log('vpopup is opened!')
                    },
                    btns: [
                        {text: '取消'},
                        {
                            text: '确定',
                            style: 'color:#00a0f1',
                            click: () => {
                                $el.close()
                            }
                        }
                    ]
                });
            }
        }
    }
</script>

大家可以根据实际使用需要,选择合适的调用方式。

下面介绍几种常见弹出框使用场景

  • msg信息框

<!-- msg提示框 -->
<v-popup v-model="showMsg" anim="fadeIn" content="msg提示框测试(3s后窗口关闭)" shadeClose="false" time="3" />
<v-popup v-model="showMsgBg" anim="footer" content="自定义背景颜色" shade="false" time="3" 
    popup-style="background:rgba(0,0,0,.6);color:#fff;"
/>

<!-- 询问框 -->
<v-popup v-model="showConfirm" shadeClose="false" title="警告信息" xclose z-index="2001"
    content="<div style='color:#00e0a1;padding:20px 40px;'>确认框(这里是确认框提示信息)</div>"
    :btns="[
        {text: '取消', click: () => showConfirm=false},
        {text: '确定', style: 'color:#e63d23;', click: handleInfo},
    ]"
/>
  • 微信/Android效果弹窗

<!-- android弹窗风格 -->
<v-popup v-model="showAndroid1" type="android" shadeClose="false" xclose title="标题内容" z-index="2002"
	content="弹窗内容,描述文字尽量控制在三行内"
	:btns="[
		{text: '知道了', click: () => showAndroid1=false},
		{text: '确定', style: 'color:#00e0a1;', click: handleInfo},
	]"
>
</v-popup>
  • Toast弱提示框

<!-- Toast弹窗风格 -->
<v-popup v-model="showToast" type="toast" icon="loading" time="2" content="加载中..." />
<v-popup v-model="showToast" type="toast" icon="success" shade="false" time="2" content="成功提示" />
<v-popup v-model="showToast" type="toast" icon="fail" shade="false" time="2" content="失败提示" />
  • ActionSheet动作提示框

<!-- 底部对话框 -->
<v-popup v-model="showFooter" anim="footer" type="footer" :shadeClose="false" z-index="1001"
	content="确定删除该条数据吗?删除后可在7天之内恢复数据,超过7天后数据就无法恢复啦!"
	:btns="[
		{text: '恢复', style: 'color:#00e0a1;', click: handleInfo},
		{text: '删除', style: 'color:#ee0a24;', click: () => null},
		{text: '取消', style: 'color:#a9a9a9;', click: () => showFooter=false},
	]"
/>

<!-- ActionSheet底部弹出式菜单 -->
<v-popup v-model="showActionPicker" anim="footer" type="actionsheetPicker" round title="标题内容"
	:btns="[
		{text: '取消', click: () => showActionPicker=false},
		{text: '确定', style: 'color:#00e0a1;', click: () => null},
	]"
>
	<!-- 自定义内容 -->
	<ul class="goods-list" style="padding:50px;text-align:center;">
		<li>双肩包</li>
		<li>鞋子</li>
		<li>运动裤</li>
	</ul>
</v-popup>

okey,这里不作一 一代码演示了。继续往下看具体实现过程哈~~

实现方式

默认参数配置

@@Props
------------------------------------------
v-model     当前组件是否显示
title       标题
content     内容(支持自定义插槽内容)
type        弹窗类型(toast | footer | actionsheet | actionsheetPicker | android/ios)
popupStyle  自定义弹窗样式
icon        toast图标(loading | success | fail)
shade       是否显示遮罩层
shadeClose  是否点击遮罩时关闭弹窗
opacity     遮罩层透明度
round       是否显示圆角
xclose      是否显示关闭图标
xposition   关闭图标位置(left | right | top | bottom)
xcolor      关闭图标颜色
anim        弹窗动画(scaleIn | fadeIn | footer | fadeInUp | fadeInDown)
position    弹出位置(top | right | bottom | left)
follow      长按/右键弹窗(坐标点)
time        弹窗自动关闭秒数(123)
zIndex      弹窗层叠(默认8080)
btns        弹窗按钮(参数:text|style|disabled|click)

@@$emit
------------------------------------------
open        打开弹出层时触发(@open="xxx")
close       关闭弹出层时触发(@close="xxx"@@Event
------------------------------------------
onOpen      打开弹窗回调
onClose     关闭弹窗回调

如上参数在标签式和函数式中均可使用。

弹窗popup.vue模板

<template>
  <div v-show="opened" class="nuxt__popup" :class="{'nuxt__popup-closed': closeCls}" :id="id">
    <div v-if="JSON.parse(shade)" class="nuxt__overlay" @click="shadeClicked" :style="{opacity}"></div>
    <div class="nuxt__wrap">
      <div class="nuxt__wrap-section">
        <div class="nuxt__wrap-child" :class="['anim-'+anim, type&&'popui__'+type, round&&'round', position]" :style="popupStyle">
          <div v-if="title" class="nuxt__wrap-tit" v-html="title"></div>
          <div v-if="type=='toast'&&icon" class="nuxt__toast-icon" :class="['nuxt__toast-'+icon]" v-html="toastIcon[icon]"></div>
          <template v-if="$slots.content"><div class="nuxt__wrap-cnt"><slot name="content" /></div></template>
          <template v-else><div v-if="content" class="nuxt__wrap-cnt" v-html="content"></div></template>
          <slot />
          <div v-if="btns" class="nuxt__wrap-btns">
            <span v-for="(btn,index) in btns" :key="index" class="btn" :style="btn.style" v-html="btn.text"></span>
          </div>
          <span v-if="xclose" class="nuxt__xclose" :class="xposition" :style="{'color': xcolor}" @click="close"></span>
        </div>
      </div>
    </div>
  </div>
</template>

/**
 * @Desc     VueJs自定义弹窗组件VPopup
 * @Time     andy by 2020-10-06
 * @About    Q:282310962  wx:xy190310
 */
<script>
  let $index = 0, $lockCount = 0, $timer = {};
  export default {
    props: {
      ...
    },
    data() {
      return {
        opened: false,
        closeCls: '',
        toastIcon: {
          ...
        }
      }
    },
    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();

        if(JSON.parse(this.shade)) {
          if(!$lockCount) {
            document.body.classList.add('nt-overflow-hidden');
          }
          $lockCount++;
        }

        // 倒计时关闭
        if(this.time) {
          $index++;
          if($timer[$index] !== null) clearTimeout($timer[$index])
          $timer[$index] = setTimeout(() => {
            this.close();
          }, parseInt(this.time) * 1000);
        }

        if(this.follow) {
          this.$nextTick(() => {
            let obj = this.$el.querySelector('.nuxt__wrap-child');
            let oW, oH, winW, winH, pos;

            oW = obj.clientWidth;
            oH = obj.clientHeight;
            winW = window.innerWidth;
            winH = window.innerHeight;
            pos = this.getPos(this.follow[0], this.follow[1], oW, oH, winW, winH);

            obj.style.left = pos[0] + 'px';
            obj.style.top = pos[1] + 'px';
          });
        }
      },
      // 关闭弹窗
      close() {
        if(!this.opened) return;

        this.closeCls = true;
        setTimeout(() => {
          this.opened = false;
          this.closeCls = false;
          if(JSON.parse(this.shade)) {
            $lockCount--;
            if(!$lockCount) {
              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);
      },
      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)
        }
      },
      getZIndex() {
        for(var $idx = parseInt(this.zIndex), $el = document.getElementsByTagName('*'), i = 0, len = $el.length; i < len; i++)
          $idx = Math.max($idx, $el[i].style.zIndex)
        return $idx;
      },
      // 获取弹窗坐标点
      getPos(x, y, ow, oh, winW, winH) {
        let l = (x + ow) > winW ? x - ow : x;
        let t = (y + oh) > winH ? y - oh : y;
        return [l, t];
      }
    },
  }
</script>

组件是通过watch方法监听传进来的v-model值调用open和close方法。

watch: {
    value(val) {
        const type = val ? 'open' : 'close';
        this[type]();
    },
},

支持右键/长按弹窗,自定义slot插槽内容。

<!-- 长按弹窗 -->
<v-popup v-model="showContextMenu2" type="contextmenu" :follow="followPos" opacity="0"
	:btns="[
		{text: '标为未读', click: handleContextPopup},
		{text: '消息免打扰'},
		{text: '置顶聊天'},
		{text: '删除', click: () => showContextMenu2=false},
	]"
/>

函数式调用实现

组件通过 Vue.extend 扩展实例构造器来实现函数式调用方式。

import Vue from 'vue';
import VuePopup from './popup.vue';

let PopupConstructor = Vue.extend(VuePopup);

let $instance;

let VPopup = function(options = {}) {
    // 同一个页面中,id相同的Popup的DOM只会存在一个
    options.id = options.id || 'nuxt-popup-id';
    $instance = new PopupConstructor({
        propsData: options
    });
    $instance.vm = $instance.$mount();

    let popupDom = document.querySelector('#' + options.id);
    if(options.id && popupDom) {
        popupDom.parentNode.replaceChild($instance.$el, popupDom);
    } else {
        document.body.appendChild($instance.$el);
    }

    Vue.nextTick(() => {
        $instance.value = true;
    })

    return $instance;
}

VPopup.install = () => {
    Vue.prototype['$vpopup'] = VPopup;
    Vue.component('v-popup', VuePopup);
}

export default VPopup;

通过如上方法就实现了把 $vpopup 方法挂载到Vue原型上并注册 v-popup 组件。

下面就可以愉快的使用 this.$vpopup({...}) 函数来进行调用了。

methods: {
	showDialog() {
		/**
		 * 通过函数方式调用弹窗( this.$vpopup({...}) )
		 */
		let $el = this.$vpopup({
			title: '标题',
			content: `<div style="padding:20px;">
				<p>通过Vue挂载,函数式调用弹窗。</p>
				<p style="color:#999;">this.$vpopup({...})</p>
			</div>`,
			btns: [
				{
					text: '取消',
					click: () => {
						// 关闭弹窗
						$el.close();
						// 动态更新内容
						// $el.content = `<p style="color:red;padding:20px;">这里是动态更新内容!</p>`;
					}
				},
				{
					text: '确认',
					style: 'color:#09f;',
					click: () => {
						this.$vpopup({
							id: 'nuxt-popup-loading', //设置ID
							type: 'toast',
							icon: 'loading',
							content: '加载中...',
							opacity: .2,
							time: 2,
						})
					}
				},
			],
			onOpen() {
				console.log('is opend!')
			},
			onClose: () => {
				console.log('is closed!')
			}
		})
	},
}

Okay,基于Vue.js|Nuxt.js自定义弹出层组件就介绍到这里。目前VPopup正在Nuxt.js项目中使用,届时也会分享出来,希望对大家有所帮助!💪✍

附上最近Flutter实例项目

Flutter+Dart仿微信App界面聊天实例|flutter聊天室