vue.js开发实现全局调用的MessageBox组件实例代码

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

 
 
 

// /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(() => {
 // ...
});