Vue定义全局弹窗组件，使其在满足某种条件情况下弹出

• 做全局弹窗组件，使其在全局任意地方满足条件情况下展示出来
• 虽然可以尝试用 mixin(混入)或者在每个文件内引入弹窗，并通过一个全局变量去达到这个效果，但如果项目文件量很大就显得繁琐并且不好维护
• 创建Vue实例，挂载实例，添加实例Dom元素，以此为方法进行实现
• 当然，这个弹窗组件可以是多个，因为可能存在很多情况去打开不同的弹窗

1 新建一个js文件，

1.1 引入main.js，使用的组件库，弹窗组件

import Vue from 'vue'
import dialog from './main.vue'
import '../main'
import ElementUI from '../element/index'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'default', zIndex: 3000 })

1.2 创建实例方法

import Vue from 'vue'
// 弹窗组件
import dialog from './main.vue'
import '../main'
import ElementUI from '../element/index'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'default', zIndex: 3000 })

// 创建一个Vue实例对像并把弹窗放进去
const dialogBox = new Vue(dialog)
// 创建一个`div`标签并将实例挂载
dialogBox.$mount(document.createElement('div'))
// 将弹窗组件的Dom元素添加到body里
document.body.appendChild(dialogBox.$el)

// 将弹窗挂载到原型链上方式使用
// Vue.prototype.$dialogBox= dialogBox

// 引入形式使用
export default dialogBox

1.3 使用方法

// 原型链方式触发
$dialogBox.open()

// 引入方式
import dialogBox from '@/components/index'
// 触发
dialogBox.open()

• 注 open()为弹窗组件的方法:

<template>
  <div class="">
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="50%"
      :show-close = 'false'
    >
     ...
    </el-dialog>
  </div>
</template>

<script>
import '../utils/flexible'
export default {
  name: '',

  props: {},

  components: {},

  data () {
    return {
      dialogVisible: false
    }
  },

  computed: {},

  watch: {},
  created () {},

  methods: {
    // 打开弹窗
    open () {
      this.dialogVisible = true
    },
  },

  mounted () {}
}
</script>

<style scoped lang="scss">
...
</style>

1.4 描述具体使用场景等

• 例如在响应拦截器里，希望请求返回值满足某一个条件触发某一个弹窗去提示或者在前置路由守卫里被拦截到，仅仅一个message不够明显或者满足不了现在的功能需要打开个弹窗。
• 当然，或许你想到了在App.vue里写这个弹窗，通过全局变量去控制，但有些时候这个弹窗的触发时机也是个问题（界面实例渲染之前），另外只能去用watch去监听这个全局变量去控制，有些时候希望这写弹窗组件更加灵活，让其在想要出现的时间节点去出现
• 最后，项目的体积或许会随着时间的推移变的更繁琐，所以可以通过以上方法定义多个弹窗，在任意的位置或者时间节点出现，增加其可维护性与可扩展性