vue自定义写一个全局的弹窗提示组件

今天我们自己写一个像elementUI的移动端的Message组件，可以全局调用。框架我们用的是vue2.x。采用了elementUI的图标

我们先上个效果图

首先我们先把这个弹窗组件写出来。创建一个mobileTip.vue文件。把DOM和css都写在此文件内

// mobileTip.vue

组件写好之后我们再新建一个tip.js文件来封装挂载这个组件

//tip.js
import mobileTip from './mobileTip.vue';
import Vue from 'vue'

export function mobileTipjs(option) {
  let mobileTipComponent = Vue.extend(mobileTip);
  let instance = new mobileTipComponent().$mount();
  Object.assign(instance, option);
  document.body.appendChild(instance.$el);
  setTimeout(() => {
    if(instance.$el)instance.$el.remove();
  },3000)
}

['success', 'info', 'error'].forEach(type => {
  mobileTipjs[type] = options => {
    if (typeof options === 'string') {
      options = {
        msg: options
      };
    }
    options.type = type;
    return mobileTipjs(options);
  };
});

到这我们的全局弹窗组件都就封装好了。最后去main.js中把我们封装好的组件挂载到全局就可以随时调用了。不挂载到全局就需要单独引入。

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import {mobileTipjs} from  '@/components/tip.js';

...
Vue.prototype.$tips = mobileTipjs;  // 在这里挂载到全局

这样我们的全局弹窗组件就全部完成了。接下来就可以直接调用了

// xxx.vue  
// 不管在哪个组件内都可以直接调用了，不需要再单独引入。
//   调用方式如下:
//方式1：
 this.$tips({
          msg:'获取信息失败，请刷新页面重试',
          type: 'error'
        })

// 方式2：
this.$tips.error("获取信息失败，请刷新页面重试");