Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框

xiaoyan2017

前言

最近在开发 Nuxt.js 项目,项目中有多个地方需要用到弹窗功能,于是就自己造了个Vue 自定义弹窗组件 VPopup。

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图

介绍

VPopup 一个基于 Vue.js 构建的多功能移动端弹出框组件。集合了 Vant 及 NutUI 中的 Popup 弹出层、Notify 通知信息、Dialog 对话框、ActionSheet 动作面板框及 Toast 弱提示框 等功能。

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(1)

快速开始

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

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(2)

提供了基本的 Msg 信息框、ActionSheet 底部面板框、Android/IOS 弹窗风格、Toast 弱提示框。支持上 /下 /左 /右弹出层,右键 /长按弹窗。

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(3)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(4)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(5)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(6)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(7)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(8)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(9)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(10)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(11)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(12)

Vue 仿微信弹窗组件 | nuxt/vue 自定义弹出框插图(13)

实现方式

参数配置

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

函数式实现

通过 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;

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

Ok,基于 Vue/Nuxt 自定义弹出层组件就介绍到这里。目前该弹窗已在 Nuxt.js 项目中使用,届时也会分享出来。?✍

作者:xiaoyan2017
链接: https://www.cnblogs.com/xiaoyan2017/p/13776977.html
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

vue seo 优化

hmf123:请问 vue 如何简单的做到 seo 优化,项目已经完成,怎么在减少工作量的情况下,SEO 优化?opengps:动态加载没办法 seo 的 buliugu:那你需要 ssr 了,参考 https://ssr.vuejs.org/zh danhahaha:另外给搜索引擎写一套简单的 html

Vue 有支持树形表格虚拟滚动的库吗?

rabbbit:翻来翻去就找到一个 vxe-table-plugin-virtual-tree, 看了一下只是实验性质的, 貌似不支持往里加按钮之类的控件,也可能是我没用明白. Vue 有支持加载大量数据下可以虚拟滚动的树形表格库吗?补充:或者性能好支持树形表格,父项里有上千条子项,打开子项时不会卡太长时间也可以,求推荐.suzic:同求 ToyotaLee…

安装 vue 时遇到了这个错误

azev:npm WARN @vue/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself. 看了下 装的是最新版的 @vue/cli 4.5.6 依…

我觉得 vue 并不适合做大项目。大佬们怎么看呢。我觉得 event 驱动性能还是比较好的。不觉得 vue 很有优势。。

matthewzhong:然而很多企业已经通过 vue 做了很多大项目了,请楼下举例。 stillsilly:这都 2020 年了…… wangyanrui:企业级项目,以代码规范性,开发人员可投入性,可替换性为指标 maigebaoer:show me your proof airyland:这句表达挺虚的,“event 驱动性能还是比较好的” 这句话就很…

Vue 3.0 正式版来啦!

molvqingtai:https://github.com/vuejs/vue-next/releases/tag/v3.0.0putaozhenhaochi:欢呼 hambman:生态怎么样? Nuxt, Vuetify 之类的?