idea提⽰vue插件_教你如何以Vue.js插件的形式实现消息提⽰
框
Vue的消息提⽰框插件
在Vue-CLI 3脚⼿架项⽬中的src⽬录下新建plugin⽂件夹，在该⽂件夹下新建MessageBox.vue，代码如例1-1所⽰。
例1-1 MessageBox.vue
vuejs流程图插件{{title}}
{{ok}}
{{cancel}}
可以看到，该组件内的数据属性都没有值，我们稍后会给该组件的数据属性设置默认值。在组件内，对数据属性cancel进⾏判断，如果计算
为假，则不渲染"取消"按钮。
我们知道d()⽅法可以创建⼀个组件的"⼦类"，我们可以利⽤这个"⼦类"来构造⼀个提⽰框组件对象，并设置组件的数据属性的默
认值。如下所⽰：
let MessageBoxImpl = d(MessageBox);// 调⽤showMessageBox函数时需要提供⼀个选项对象，// ⽤于初始化组件内的各个选项function showMessageBo 对上述代码进⼀步改良，使⽤闭包函数调⽤返回⼀个对外的接⼝。如下所⽰：
(function(){  // 组件数据属性和事件响应函数的默认值  let defaults = {    title: '',    ok: '确定',    cancel: '',    handleOk: function(){},    handleCancel: function(){}  }    le 接下来将上述代码封装为Vue的插件，Vue的插件开发很简单，只需要按照如下形式编写代码即可。
MyPlugin.install = function (Vue, options) {  // 1. 添加全局⽅法或属性  GlobalMethod = function () {    // 逻辑...  }  // 2. 添加全局资源  Vue.directive('my-direct 按照上述插件开发形式编写消息提⽰框插件，在plugin⽬录下新建vue-msgbox.js，完整的代码如例1-2所⽰。
例1-2 vue-msgbox.js
import MessageBox from './MessageBox'const msgBox = {};msgBox.install = function(Vue){  Vue.prot
otype.$msgBox = msgBox;  msgBox.show = (function组接下来引⼊和安装vue-msgbox插件，编辑main.js⽂件，添加如下的代码：
import msgBox from './plugin/vue-msgbox'Vue.use(msgBox)
使⽤插件弹出消息提⽰框如图1-1所⽰。
图1-1 消息提⽰框

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。