关于vue.js:NuxtVue仿微信ios弹窗vue自定义模态框

33次阅读

共计 7336 个字符，预计需要花费 19 分钟才能阅读完成。

前言

最近趁着国庆假期始终在捣鼓 Nuxt.js 我的项目开发，因为我的项目中须要多个中央应用到弹窗性能，鉴于网上的一些组件可能不能很好满足我的项目需要，于是就本人入手开发了个自定义对话框组件 Vpopup。

介绍

VPopup 轻量级挪动端 Vue 弹窗组件。集中交融了有赞 Vant、京东 NutUI 等 Vue 组件库中的 Msg 信息框、Popup 弹层、Dialog 对话框、Toast 提示框、ActionSheet 动作面板框、Notify 告诉框 等性能。

用法

在 main.js 中引入组件

import Popup from './components/popup'
Vue.use(Popup)

反对标签式和函数式两种形式调用组件。

<!-- 标签式调用 -->
<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,
                    onClose: () => {console.log('vpopup is closed！')
                    },
                    btns: [{text: '敞开'},
                        {
                            text: '确定',
                            style: 'color:#00e0a1',
                            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="2" 
    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},
    ]"
/>
  • 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="失败提醒" />
  • 微信 /android 格调弹窗

<!-- Android 格调弹窗 -->
<v-popup v-model="showAndroid1" type="android" shadeClose="false" xclose title="题目内容" z-index="2001"
    content="弹窗内容，告知以后状态、信息和解决办法，形容文字尽量管制在三行内"
    :btns="[{text: '晓得了', click: () => showAndroid1=false},
        {text: '确定', style: 'color:#00e0a1;', click: handleInfo},
    ]"
>
</v-popup>
  • ActionSheet 动作面板弹窗

<!-- ActionSheet 底部菜单 -->
<v-popup v-model="showActionSheet" anim="footer" type="actionsheet" :z-index="1011"
    content="弹窗内容，告知以后状态、信息和解决办法，形容文字尽量管制在三行内"
    :btns="[{text: '拍照', style: 'color:#09f;', disabled: true, click: handleInfo},
        {text: '从手机相册抉择', style: 'color:#00e0a1;', click: handleInfo},
        {text: '保留图片', style: 'color:#e63d23;', click: () => null},
        {text: '勾销', click: () => showActionSheet=false},
    ]"
/>

soga，这里就不一一贴上示例代码了。如果感觉还不错，那就往下看实现过程吧。

实现形式

参数配置
弹窗反对如下参数自定义配置，大家依据须要自行搭配应用。

@@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        弹窗主动敞开秒数（1、2、3）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>

通过组件传过来的 v -model 来调用 open()和 close()办法。

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

组件还反对 右键弹窗 / 长按弹窗 及自定义插槽 内容。

<v-popup v-model="showComponent" xclose xposition="bottom" :shadeClose="false" content="这里是内容信息"
    :btns="[{text: '确认', style: 'color:#f60;', click: () => showComponent=false},
    ]"@open="handleOpen"@close="handleClose"
>
    <template #content><b style="color:#00e0a1;"> 当 content 和 自定义插槽 内容同时存在，只显示插槽内容！！！</b></template>
    <!-- <div slot="content"> 显示自定义插槽内容！</div> -->
    <div style="padding:30px 15px;">
        <img src="https://img.yzcdn.cn/vant/apple-3.jpg" style="width:100%;" @click="handleContextPopup" />
    </div>
</v-popup>

通过 Vue.extend 扩大结构器来实现函数式调用 this.$vpopup({…})

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;

如上就实现了在 Vue 的 prototype 上挂载 $vpopup 办法及注册 v-popup 组件。

好了，基于 Vue+Nuxt 自定义弹窗组件就介绍到这里。目前该组件正在 Nuxt 我的项目中应用，到时也会分享进去。心愿对大家有所帮忙！！????????

最初附上基于 Uniapp+Vue 跨端仿抖音 | 聊天实例我的项目
https://segmentfault.com/a/1190000020972307

正文完
vue.js
发表至： vue.js
2020-10-07
 0
关于vue.js:vue学习整理
关于vue.js:Vue父子组件的数据通信双向绑定
关于vue.js:Vue源码解读之InitState
关于vue.js:vue3的小知识