美文网首页
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