Vue的消息提示框插件
在Vue-CLI 3脚手架项目中的src目录下新建plugin文件夹,在该文件夹下新建MessageBox.vue,代码如例1-1所示。
例1-1 MessageBox.vue
可以看到,该组件内的数据属性都没有值,我们稍后会给该组件的数据属性设置默认值。在组件内,对数据属性cancel进行判断,如果计算为假,则不渲染"取消"按钮。
我们知道Vue.extend()方法可以创建一个组件的"子类",我们可以利用这个"子类"来构造一个提示框组件对象,并设置组件的数据属性的默认值。如下所示:
let MessageBoxImpl = Vue.extend(MessageBox);// 调用showMessageBox函数时需要提供一个选项对象,// 用于初始化组件内的各个选项function showMessageBox(opts){let vm = new MessageBoxImpl({ el: document.createElement("div"), //创建一个组件挂载的根元素 data() { return { title: opts.title ? opts.title : '', ok: opts.ok ? opts.ok : '确定', cancel: opts.cancel ? opts.cancel : '' } }, methods: { handleOk(){ if(opts.handleOk) // 如果外部指定了“确定”按钮的点击事件处理函数, // 则调用它,使用组件的this进行绑定 opts.handleOk.call(this); // 点击“确定”按钮时,从DOM中删除提示框组件 document.body.removeChild(vm.$el); }, handleCancel(){ if(opts.handleCancel) // 如果外部指定了“取消”按钮的点击事件处理函数, // 则调用它,使用组件的this进行绑定 opts.handleCancel.call(this); // 点击“取消”按钮时,从DOM中删除提示框组件 document.body.removeChild(vm.$el); } }});// 将组件绑定的根元素添加到HTML body元素内document.body.appendChild(vm.$el)}
对上述代码进一步改良,使用闭包函数调用返回一个对外的接口。如下所示:
(function(){ // 组件数据属性和事件响应函数的默认值 let defaults = { title: '', ok: '确定', cancel: '', handleOk: function(){}, handleCancel: function(){} } let MessageBoxImpl = Vue.extend(MessageBox); return function(opts){ //配置参数 for(let attr in opts){ defaults[attr] = opts[attr]; } let vm = new MessageBoxImpl({ el: document.createElement("div"), // 创建一个组件挂载的根元素 data() { return { title: defaults.title, ok: defaults.ok, cancel: defaults.cancel, } }, methods: { handleOk(){ defaults.handleOk.call(this); document.body.removeChild(vm.$el); }, handleCancel(){ defaults.handleCancel.call(this); document.body.removeChild(vm.$el); } } }); document.body.appendChild(vm.$el) }})();
接下来将上述代码封装为Vue的插件,Vue的插件开发很简单,只需要按照如下形式编写代码即可。
MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件选项 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... }}
按照上述插件开发形式编写消息提示框插件,在plugin目录下新建vue-msgbox.js,完整的代码如例1-2所示。
例1-2 vue-msgbox.js
import MessageBox from './MessageBox'const msgBox = {};msgBox.install = function(Vue){ Vue.prototype.$msgBox = msgBox; msgBox.show = (function(){ // 组件数据属性和事件响应函数的默认值 let defaults = { title: '', ok: '确定', cancel: '', handleOk: function(){}, handleCancel: function(){} } let MessageBoxImpl = Vue.extend(MessageBox); // 调用msgBox.show函数时需要提供一个选项对象, // 用于初始化组件内的各个选项 return function(opts){ //配置参数 for(let attr in opts){ defaults[attr] = opts[attr]; } let vm = new MessageBoxImpl({ el: document.createElement("div"), // 创建一个组件挂载的根元素 data() { return { title: defaults.title, ok: defaults.ok, cancel: defaults.cancel, } }, methods: { handleOk(){ defaults.handleOk.call(this); // 点击“确定”按钮时,从DOM中删除提示框组件 document.body.removeChild(vm.$el); }, handleCancel(){ defaults.handleCancel.call(this); // 点击“取消”按钮时,从DOM中删除提示框组件 document.body.removeChild(vm.$el); } } }); // 将组件绑定的根元素添加到HTML body元素内 document.body.appendChild(vm.$el) } })(); }export default msgBox;
接下来引入和安装vue-msgbox插件,编辑main.js文件,添加如下的代码:
import msgBox from './plugin/vue-msgbox'Vue.use(msgBox)
使用插件弹出消息提示框如图1-1所示。
![5fc95a7007c3546bdf791b22e906e944.png](https://i-blog.csdnimg.cn/blog_migrate/7e9d2065f851eaa38be60effa7769115.jpeg)
图1-1 消息提示框