Vue的消息提示框插件

在Vue-CLI 3脚手架项目中的src目录下新建plugin文件夹，在该文件夹下新建MessageBox.vue，代码如例1-1所示。

例1-1 MessageBox.vue

<template>  <div class="messageBox">    <h2>{{title}}</h2>    <div>      <div class="ok" @click="handleOk">{{ok}}</div>      <div class="cancel" @click="handleCancel" v-if="cancel">{{cancel}}</div>    </div>  </div></template><script>export default {  name: "MessageBox",  props: [""],  data() {    return {      title: '',      ok: '',      cancel: ''    };  }}</script>

可以看到，该组件内的数据属性都没有值，我们稍后会给该组件的数据属性设置默认值。在组件内，对数据属性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所示。

图1-1 消息提示框