投稿
  1. 小新网首页
  2. 百科知识

messagebox函数（vue弹出提示框confirm组件）

江下科技小助手 • • 百科知识

Vue的消息提示框插件

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

例1-1 MessageBox.vue

{{title}} {{ok}} {{cancel}}

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

messagebox函数（vue弹出提示框confirm组件）

本文来自作者:江下科技小助手，不代表小新网立场！

转载请注明：https://www.xiaoxinys.cn/597730.html

赞 (0)
江下科技小助手江下科技小助手注册用户
0
上一篇 2023-05-14 14:41:00
下一篇 2023-05-14 14:45:00

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。