Element弹窗集中管理方案

最新推荐文章于 2024-11-28 21:09:48 发布

原创

最新推荐文章于 2024-11-28 21:09:48 发布 · 647 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #弹窗 #Element #createAPI #cube-ui

本文介绍了一种解决Vue项目中大量弹窗管理问题的方法，通过将弹窗组件集中在一个文件，并利用Element的createAPI挂载到body元素下，实现弹窗的统一管理和维护。详细讲述了开发过程，包括如何挂载弹窗、对外暴露管理方法，并提供了相关代码示例和使用说明。

一、起因

因为最近在项目用到了大量的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.