vue项目添加全局消息弹窗

1. 前提：本弹窗使用的组件是element ui,需要在项目安装，具体安装请移步官网
2. 创建全局组件，代码如下

<template>
  <div class="confirm">
    <el-dialog
      append-to-body lock-scroll
      ref="executeResult"
      title="全局弹窗"
      :visible.sync="visible"
      :width="hasMore?'50%':'30%'"
    >
      <div v-if="!hasMore">
        <div class="confirm-image">
          <el-image
            style="width: 100px; height: 100px"
            :src="url"
            fit="fit"></el-image>
          <div>共{{ operateCount }}条数据，审核成功{{ successCount }}条，失败{{ cancelCount }}条</div>
        </div>
        <div class="message-box">
          <div class="confirm-message" v-for="(item,index) in msgList.slice(0,5).reverse()" :key="index">
            {{ item }}
          </div>
        </div>
        <div class="message-more" v-if="msgList.length>5" @click="viewMore">查看更多</div>
      </div>
      <div v-else>
        <el-table border highlight-current-row :data="tableData" style="width: 100%" max-height="350">
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column prop="msg" label="处理结果"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="visible = false">我知道了</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
const url = require('@/assets/images/icon/question.png')
export default {
  name: "index",
  data() {
    return {
      tableData: [],//表格数据
      visible: false,//控制弹窗
      url: url,
      cancelCount: 0,//失败条数
      operateCount: 0,//操作条数
      successCount: 0,//成功条数
      msgList: [],
      hasMore: false,//是否显示更多
    }
  },
  watch: {
    visible(newValue, oldValue) {
      if (!newValue) {
        // 当弹窗状态为隐藏时
        let confirm = document.getElementsByClassName('confirm');
        if (confirm.length >= 2) {
          // 如果页面中类名为confirmDel的元素个数大于等于2时，则删除第一个元素，确保页面中只有一个confirmDel元素
          let confirmDel = confirm[0];
          document.body.removeChild(confirmDel);
        }
      }
    }
  },
  methods: {
    //初始化弹窗
    openDialog() {
      this.visible = true
      this.$message.success('操作成功!')
    },
    //查看更多按钮
    viewMore() {
      this.tableData = this.msgList.reverse().map(item => {
        return {
          status: '错误',
          msg: item
        }
      })
      this.$nextTick(() => {
        this.hasMore = true
      })
    },
  }
}
</script>

<style scoped>
//这个CSS就是将dialog弹窗取消全屏显示，让他在某个div元素内部，这个背景相当于自己实现了遮罩，前提还需要把
//append-to-body;modal-append-to-body;modal设置为false即可
//.confirm {
  //::v-deep .el-dialog__wrapper {
    //position: absolute !important;
    //background: rgb(0, 0, 0, 0.4);
  //}
//}
.confirm-image {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.message-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .confirm-message {
    padding: 10px;
  }
}

.message-more {
  color: #00afff;
  cursor: pointer;
}
</style>

3. 在main.js中全局挂载该组件

//挂载执行结果组件
import executeResult from "@/components/ExecuteResult/index.vue";

const messageBox = Vue.extend(executeResult)
//此处options就是你给该组件传递的data值
executeResult.install = function (options) {
//使用$mount()给组件手动挂载参数
  let instance = new messageBox({
    data: options
  }).$mount()

  document.body.appendChild(instance.$el); //将组件插入页面中
  //注解：假如不想是全屏的，只是想将弹窗添加进入每个页面路由内，可以先获取到那个dom元素进行添加
  //例如：let el = document.querySelectorAll('#execute')[0]
 // el === undefined ? document.body.appendChild(instance.$el) : el.appendChild(instance.$el)注意判空
  Vue.nextTick(() => {
    // 设置弹窗为显示状态
    instance.openDialog()
  })
}
Vue.prototype.$executeResult = executeResult.install

4.再需要显示使用的地方：

5.到此就完成了，结果展示