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

我们先上个效果图

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

// mobileTip.vue
<template>
  <div class="Box" >
    <div class="contentBox">
          <!-- 这里的图标用的是elementUI的图标 -->
      <i class="el-icon-success icon success" v-if="type === 'success'" ></i>
      <i class="el-icon-error icon error"  v-if="type === 'error'" ></i>
      <i class="el-icon-warning icon info"  v-if="type === 'info'"></i>
      <span> {{msg}}</span>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },


  props: {

    msg: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      required: false,
      default: 'success'
    }
  },
}
</script>

<style scoped>
  .Box{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    justify-content:center;
    align-items: center;
    z-index: 999999;
  }
   .contentBox{
      max-width: 80%;
      min-height: 120px;
      background: rgba(1,1,1,0.7);
      color: rgb(221, 215, 215);
      border-radius: 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content:center;
      /* font-size:28px; */
    }
    .contentBox span{
      word-break: break-all;
      margin: 0 16px;
    }
    .icon{
      font-size: 40px;
      margin-bottom: 16px;
    }
    .info{
      color: #909399;
    }
    .success{
      color: #67c23a;
    }
    .error{
      color: #f56c6c;
    }
</style>

组件写好之后我们再新建一个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("获取信息失败，请刷新页面重试");