vue.js中如何全局调用MessageBox组件

这篇文章主要介绍“vue.js中如何全局调用MessageBox组件”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue.js中如何全局调用MessageBox组件”文章能帮助大家解决问题。

创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于网站设计制作、成都网站建设、雅安网络推广、微信平台小程序开发、雅安网络营销、雅安企业策划、雅安品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供雅安建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

组件模板

// /src/components/MessageBox/index.vue

 
 
 
 // 此处省略 ...
 

给组件添加全局功能

vue.js官方文档中有开发插件的介绍。具体实现代码如下:

// /src/components/MessageBox/index.js

import msgboxVue from './index.vue'; 
// 定义插件对象
const MessageBox = {};
// vue的install方法,用于定义vue插件
MessageBox.install = function (Vue, options) {
 const MessageBoxInstance = Vue.extend(msgboxVue);
 let currentMsg, instance;
 const initInstance = () => {
 // 实例化vue实例
 currentMsg = new MessageBoxInstance();
 let msgBoxEl = currentMsg.$mount().$el;
 document.body.appendChild(msgBoxEl);
 };
 // 在Vue的原型上添加实例方法,以全局调用
 Vue.prototype.$msgBox = {
 showMsgBox (options) {
  if (!instance) {
  initInstance();
  }
  if (typeof options === 'string') {
  currentMsg.content = options;
  } else if (typeof options === 'object') {
  Object.assign(currentMsg, options);
  }
  return currentMsg.showMsgBox();
 }
 };
};
export default MessageBox;

全局使用

// src/main.js
import MessageBox from './components/MessageBox/index';
Vue.use(MessageBox);

页面调用

按照之前定义好的方法,可以在各个页面中愉快的调用该组件了。

this.$msgBox.showMsgBox({
 title: '添加分类',
 content: '请填写分类名称',
 isShowInput: true
}).then(async (val) => {
 // ...  
}).catch(() => {
 // ...
});

最后来张效果图

vue.js中如何全局调用MessageBox组件

关于“vue.js中如何全局调用MessageBox组件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


标题名称:vue.js中如何全局调用MessageBox组件
网站链接:http://scyanting.com/article/ihhgei.html