android 自定义dialog_高质量 Vue.js 自定义弹窗组件VPopup

起因

很早之前就有写过一个wcPop.js弹窗插件，并且在h5酒店预订、h5聊天室项目中都有使用过，效果还不错。当初想着有时间整合一个Vue版本，刚好趁着国庆节空闲时间捣鼓了个vue.js版自定义模态弹出框组件VPopup。

v-popup 一款聚合Msg、Dialog、Popup、ActionSheet、Toast等功能的轻量级移动端Vue弹窗组件。

整合了有赞Vant及NutUI等热门Vue组件库中Popup弹出层、Toast轻提示、Notify消息提示、Dialog对话框及ActionSheet动作面板等功能。

使用组件

// 在main.js中全局引入import Vue from 'vue'import Popup from './components/popup'Vue.use(Popup)

支持如下两种方式调用组件。

• 标签式调用

• 函数式调用

this.$vpopup({...})，传入参数即可使用，该函数会返回弹窗组件实例。

let $el = this.$vpopup({  title: '标题内容',  content: '弹窗内容，描述文字尽量控制在三行内',  type: 'android',  shadeClose: false,  xclose: true,  zIndex: 2000,  btns: [    {text: '取消'},    {      text: '确认',      style: 'color:#f60;',      click: () => {        $el.close()      }    },  ]});

你可根据喜好或项目需要任意选择一种调用方式即可。下面就开始讲解下组件的实现。

在components目录下新建popup.vue页面。

组件参数配置

通过监听v-model值调用open和close方法。

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

如果想要实现函数式调用this.$vpopup({...})，则需要使用到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;

这样就实现了引入 Popup 组件后，会自动在 Vue 的 prototype 上挂载 $vpopup 方法和注册 v-popup 组件。

下面就可以愉快的使用标签式及函数式调用组件了。

• 设置圆角及关闭按钮

双肩包 鞋子 运动裤 双肩包 鞋子 运动裤

• 设置按钮禁用状态

按钮设置disabled: true即可禁用按钮事件。

另外还支持自定义slot插槽内容，当 content 和 自定义插槽 内容同时存在，只显示插槽内容。

当 content 和 自定义插槽 内容同时存在，只显示插槽内容！

好了，就分享到这里。希望对大家有所帮助。目前该组件正在项目中实战测试，后续会分享相关使用情况。