Element弹窗集中管理方案

一、起因

因为最近在项目用到了大量的Element的弹窗，每次用到弹窗时都需要用组件的方式去调用，有时候一个页面需要用到四、五个弹窗，写在一个页面组件一是不便于弹窗的维护，二是弹窗组件是渲染在页面组件的根节点下，而不是挂载在body下。

所以想想能不能把弹窗组件集中在一个文件管理，通过类似cube-ui的createAPI 模块将弹窗组件挂载到body下。

二、开发

1、弹窗挂载到body

因为要挂载到body，所以需要使用JS去创建弹窗模板，这里使用Vue的render函数

const newPopup = new Vue({
   
    data () {
   
        return {
   
            props // 传入弹窗的props
        }
    },
    render: h => <PopupComponent props={
   props} /> // h 虽然没有使用，但必须要写
})
// 将弹窗组件挂载到body
const popupCom = newPopup.$mount()
document.body.