vue2-封装showModal方法,方便调用常用弹窗

174 阅读1分钟
import addressModal from '../../components/addressModal'
import uploadModal from '../../components/uploadModal'
import exportModal from '../../components/exportModal'
import refocusModal from '../../components/refocusModal'
import store from '../../store'

function install(Vue) {
  /**
   * 调用全局modal框
   * @param type modal类型
   * @param cancelCallback 关闭modal框回调函数
   * @param confirmCallback 点击确认按钮回调函数
   * @param handlerCallback 自定义回调函数,监听handler事件
   * @param restProps 组件props
   */
  function showModal(type, { cancelCallback, confirmCallback, handlerCallback, ...restProps }) {
    let modalComponent
    switch (type) {
      // 地址管理modal
      case 'address':
        modalComponent = addressModal
        break
      // 上传文件modal
      case 'upload':
        modalComponent = uploadModal
        break
      // 导出数据modal
      case 'export':
        modalComponent = exportModal
        break
      // 重新关注modal
      case 'refocus':
        modalComponent = refocusModal
        break
      default:
        return
    }

    const Modal = Vue.extend(modalComponent)
    const instance = new Modal({
      store,
      propsData: {
        value: true,
        ...restProps,
      },
      methods: {
        // 关闭modal并销毁
        close() {
          document.body.removeChild(this.$el)
          this.$destroy()
        },
      },
    }).$mount()
    if (cancelCallback) {
      instance.$on('on-cancel', cancelCallback)
    }
    if (confirmCallback) {
      instance.$on('on-ok', confirmCallback)
    }
    if (handlerCallback) {
      instance.$on('handler', handlerCallback)
    }
    document.body.appendChild(instance.$el)
  }
  Vue.prototype.$showModal = showModal
  return showModal
}

export default install