全局弹框组件

// 全局弹框组件
import DialogPopup from '@/components/DialogCommon'
Vue.prototype.$dialogPopup = DialogPopup.install

import Vue from 'vue'
import store from '../../store'
import Dialog from '@/views/components/dialog'
let instance
let isExist
const DialogBox = Vue.extend(Dialog)
Dialog.install = (data) => {
  if (!data.dom) {
    console.log('内容缺失')
    return false
  }
  if (data.coexist) { // 尚持弹框是否保留
    isExist = new DialogBox({
      data,
      store
    }).$mount()
    document.body.appendChild(isExist.$el)
    // 挂载至页面（#app）
    Vue.nextTick(() => {
      isExist.visible = true
      // show 和弹窗组件里的show对应，用于控制显隐
    })
  } else {
    if (isExist) {
      isExist.visible = false
      document.body.removeChild(isExist.$el)
      isExist = null
    }
    if (instance) {
      instance.visible = false
      document.body.removeChild(instance.$el)
      instance = null
    } // 移除已有弹窗，确保只有一个弹窗显示
    instance = new DialogBox({
      data,
      store
    }).$mount()
    document.body.appendChild(instance.$el)
    // 挂载至页面（#mes

    Vue.nextTick(() => {
      instance.visible = true
      // visible 和弹窗组件里的show对应，用于控制显隐
    })
  }
}
/**
 * 简单的使用方式
 * this.$dialogPopup({
      title: '测试', // 标题的内容
      topBg: true, // 头部那个背景
      autoHeight: true, // body内部是否自动撑开
      dom: Test, // 组件是自己创建的
      width: '800px', // 弹框的宽度
      coexist: false, // 控制上一次弹窗是否保留，默认false
      option: {} 数据会传入自己的组件  通过props里定义option 组件里可以使用this.option 拿到
    })
  * 异步用法
    this.$dialogPopup({
      title: '测试',
      dom: Test,
      showFooter: true, // 展示脚部组件
      isSync: true, // 是否要异步关闭
      width: '800px',
      coexist: false, // 控制上一次弹窗是否保留，默认false
      option: data,
      ok: (success) => { // ok 回调的参数是一个函数 调用就可以在接口调用后关闭弹框
        setTimeout(() => {
          success()
        }, 5000)
      }
    })
  * 给内容绑定事件 让组件内的事件能推到组件调用里外头
    this.$dialogPopup({
      title: '测试',
      dom: Test,
      width: '800px',
      coexist: false, // 控制上一次弹窗是否保留，默认false
      option: data,
      events: 'content', // 给传递到组件的自定义内容组件绑定content 事件，组件内使用this.$emit('content', data)调用  多个请用数组
      content: (data) => { // 定义同名的函数对象其中可以拿到组件对外外传输的值
        // data 就是要传递的参数
      },
      clickContent: (data)=> {
        // 组件默认绑定了click事件 自定义内容组件内使用this.$emit('click', data)调用
      }
    })
  * 脚步自定义组件和异步情况下自定义组件的用法
    this.$dialogPopup({
      title: '测试',
      dom: Test,
      showFooter: true, // 展示脚部组件
      footerDom: TestFooter, // 自定义脚部组件
      footerEvents: 'footer', // 自定义脚部事件 多个请用数组
      footer: (data, success) => { // 需要定义同名的事件名称  success 是异步情况下第二个参数
        setTimeout(() => {
          success()
        }, 3000)
      },
      isSync: true, // 开启异步
      width: '800px',
      coexist: false, // 控制上一次弹窗是否保留，默认false
      option: data
    })
 */
export default Dialog