小编给大家分享一下vue插件--仿微信小程序showModel模态提示窗功能的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

效果图:

下面是源码:
index.js
import Vue from 'vue';
import model from './model.vue';
export default {
install(Vue) {
const defaults = {
show: false,
mask: true,
title: '提示',
content: '这是正文',
confirmButton: true,
cancelButton: true,
confirmText: '确认',
cancelText: '取消',
cancelCallBack: () => {},
confirmCallBack: () => {}
};
const modelVueConstructor = Vue.extend(model);
Vue.prototype.$model = (options = {}) => {
if (Vue.prototype.$isServer) return;
options = Object.assign({}, defaults, options);
let parent = document.body ;
let instance = new modelVueConstructor({
el: document.createElement('div'),
data: options
});
parent.appendChild(instance.$el);
return instance;
};
},
}; Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室(个体工商户) 版权所有 蜀ICP备19037934号