弹窗组件及其回调函数

this.$confirm('xxx') 

this.$confirm('这是一条信息').then(() => {
  console.log('确定了')
}).catch(() => {
  console.log('关闭了')
})

<template>
  <div>
    ...
  </div>
</template>
<script>
export default {
  name: 'confirm',
  data() {
    return {
      promptMessage: '',
      modelOperate: '确认',
      confirmVisible: false,
      resolve: '', // promise，类型 function
      reject: '' // promise，类型 function
    }
  },
  watch: {},
  computed: {
    showClass() {
      return this.confirmVisible ? 'view' : ''
    }
  },
  mounted() {},
  created() {},
  filters: {},
  methods: {
    close() {
      this.reject() // catch 获取
      this.confirmVisible = false
    },
    confirm() {
      this.resolve() // then 获取
      this.confirmVisible = false
    }
  }
}
</script>

import Main from './Confirm.vue'
import Vue from 'vue'

let ConfirmConstructor = Vue.extend(Main)
let instance, params

const Confirm = function(options) {
  return new Promise((resolve, reject) => { // eslint-disable-line
    if (typeof options === 'string') {
      params = {
        promptMessage: options,
        resolve: resolve, // 将 resolve、reject 传到组件内调用
        reject: reject
      }
    } else {
      params = {
        ...options,
        resolve: resolve,
        reject: reject
      }
    }
    showConfirm()
  })
}

const showConfirm = () => {
  let options = params || {}
  instance = new ConfirmConstructor({
    data: options
  })
  instance.$mount() // 挂载
  document.body.appendChild(instance.$el)
  instance.confirmVisible = true
}

export default Confirm

import Confirm from './src/main'
export default Confirm

import Confirm from './confirm'

const install = function(Vue, opts = {}) {
  Vue.prototype.$confirm = Confirm
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  Confirm,
  install
}