美文网首页
vue 全局可调用的绑定手机组件

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

作者: 前端小白初长成 | 来源:发表于2020-08-18 17:52 被阅读0次

调用方式 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

相关文章

网友评论

      本文标题:vue 全局可调用的绑定手机组件

      本文链接:https://www.haomeiwen.com/subject/nhcdhktx.html