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

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

组件模板

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

给组件添加全局功能

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

// /src/components/MessageBox/index.jsimport 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.jsimport MessageBox from './components/MessageBox/index';Vue.use(MessageBox);

页面调用

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

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

最后来张效果图

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