Nuxt|Vue仿微信/ios弹窗|vue自定义模态框

前言

最近趁着国庆假期一直在捣鼓Nuxt.js项目开发,由于项目中需要多个地方使用到弹窗功能,鉴于网上的一些组件可能不能很好满足项目需求,于是就自己动手开发了个自定义对话框组件Vpopup。
Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第1张图片

介绍

VPopup 轻量级移动端Vue弹窗组件。集中融合了有赞Vant、京东NutUI等Vue组件库中的 Msg信息框、Popup弹层、Dialog对话框、Toast提示框、ActionSheet动作面板框、Notify通知框 等功能。
Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第2张图片

用法

在main.js中引入组件

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

支持标签式和函数式两种方式调用组件。



这里可以根据项目需求,自行选择调用方式即可。

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第3张图片

  • Msg信息框

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第4张图片

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第5张图片

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第6张图片






  • Toast轻提示框

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第7张图片

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第8张图片




  • 微信/android风格弹窗

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第9张图片

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第10张图片



  • ActionSheet动作面板弹窗

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第11张图片

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第12张图片

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第13张图片


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

/**
 * @Desc     VueJs自定义弹窗组件VPopup
 * @Time     andy by 2020-10-06
 * @About    Q:282310962  wx:xy190310
 */

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

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

组件还支持右键弹窗/长按弹窗自定义插槽内容。

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第14张图片

Nuxt|Vue仿微信/ios弹窗|vue自定义模态框_第15张图片


    
    
    

通过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,nuxt.js,弹窗)