@allo_shuang/modal/init.js

统一弹窗组件。用于规范项目弹窗管理的架构及使用。减少手动操作及心智成本。UI组件库使用Element-UI。

import Container from './Container'
export default function(files,Vue, opts = {}) {
  //维护所有弹窗的引用
  const modals = Object.create(null)
  //动态遍历src/modal文件夹下所有含有index.vue的文件夹，并将文件夹的名称作为弹窗id。
  files.keys().forEach(aFolder => {
    const name = aFolder.replace(/^\.\/(.*)\/index.vue$/, ($, $1) => $1)
    modals[name] = () => files(aFolder)
  })
  //自带的简单确认弹窗，以后有其他常用弹窗，可在这里添加
  modals['$message_modal'] = () => import('./MessageModal')
  //生成容器单例实例instance
  let ComConstructor = Vue.extend(Container)
  const instance = new ComConstructor()
  instance.modals = modals
  //挂载到Vue原型上的$modal
  const $modal = {}
  //展示自定义弹窗
  $modal.show= instance.showModal
  //关闭最上层弹窗
  $modal.close= instance.closeTopModal
  //关闭所有弹窗，与隐藏参数overlay有关
  $modal.closeAll =  instance.closeAllModal
  //展示内置成功弹窗
  $modal.success =  instance.showInfoModal.bind(null, 'success')
  //展示内置警告弹窗
  $modal.warning =  instance.showInfoModal.bind(null, 'warning')
  //展示内置错误弹窗
  $modal.error =  instance.showInfoModal.bind(null, 'error')
  //展示内置信息弹窗
  $modal.info =  instance.showInfoModal.bind(null, 'info')
  //展示内置纯文本弹窗
  $modal.text =  instance.showInfoModal.bind(null, '')
  //将Vue.use(_,opts)传入的参数往里传
  $modal.options =  opts
  //挂载到Vue上
  Vue.prototype.$modal=$modal
  //生成节点
  instance.$mount()
  //挂载到body上
  document.body.appendChild(instance.$el)

}