vivo-ui/src/plugins/dialog/index.js

vivo ui component lib for vue

import Dialog from '../../components/dialog/index.vue'

export default {
  install (Vue) {
    const list = []

    Dialog.mixins = [...Dialog.mixins, {
      created () {
        list.push(this)
      }
    }]
    Vue.$vui = Vue.prototype.$vui = Vue.prototype.$vui || {}
    Vue.prototype.$vui.dialog = {
      show (option) {
        new Vue({ // eslint-disable-line no-new
          el: document.body.appendChild(document.createElement('div')),
          template: `<v-dialog class="${option.className ? option.className : 'vui-dialog-plugin'}" :close="close" :auto-close="autoClose" :title="title" :btns="btns" v-model="show" @btn-click="btnClick"><div v-html="slot"></div></v-dialog>`,
          data: {
            show: true,
            slot: (option && option.slot) || '',
            close: (option && option.close) || Dialog.props.close.default,
            autoClose: (option && option.autoClose !== undefined) ? option.autoClose : Dialog.props.autoClose.default,
            title: (option && option.title) || Dialog.props.title.default,
            btns: (option && option.btns) || Dialog.props.btns.default()
          },
          watch: {
            show (value) {
              !value && setTimeout(() => {
                this.$destroy()
              }, 1000)
            }
          },
          methods: {
            btnClick (type) {
              option && typeof option.callback === 'function' ? option.callback(type, this.destroy) : this.destroy()
            },
            destroy () {
              this.show = false
            }
          },
          destroyed () {
            this.$el.parentElement.removeChild(this.$el)
          },
          components: {
            VDialog: Dialog
          }
        })
      },
      hide () {
        list.forEach(function (vm) {
          vm.$emit('input', false)
        })
      }
    }
  }
}