vue 全局可调用的绑定手机组件

调用方式 Vue.prototype.$msgTip.showTip({title: '绑定手机号使用全部服务',bottomx:'0'})

import toastComponent from './bindingMobile.vue'

const MessageBoxs = {};


MessageBoxs.install = function(Vue, options) {
  const MessageTipInstance = Vue.extend(toastComponent);
  let currentMsg;
  const initInstance = () => {
    // 实例化vue实例
    currentMsg = new MessageTipInstance();
    let msgBoxEl = currentMsg.$mount().$el; 
    document.body.appendChild(msgBoxEl);
  };
  // 在Vue的原型上添加实例方法，以全局调用
  Vue.prototype.$msgTip = {
    showTip(options) {
      if (!currentMsg) {
        initInstance();
      }
      if (typeof options === 'string') {
        currentMsg.title = options;
      } else if (typeof options === 'object') {
        Object.assign(currentMsg, options);
      }
      return currentMsg; 
    }
  };
};



export default MessageBoxs

image.png