Vue3|Vue3 优雅的模态框封装方案 Vue3优雅的模态框封装方案

【Vue3|Vue3 优雅的模态框封装方案】Mr Mao'blog - gitee.io/mao-blog
Vue3 优雅的模态框封装方法 - 初探
Vue3 优雅的模态框封装方法 - 实践
Vue3 优雅的模态框封装方法 - 定制
上次说到利用虚拟节点和瞬移组件制作模态框组件，并支持 template 中调用和 JavaScript 中调起
但实际上，我们在工作中不会花这么大的精力去做这些繁琐的工作，一般都会直接使用组件库的弹出层去修改（例如 element-plus）
但所涉及到的问题又回到了通篇都在描述的点上：
不通用，不能很方便的调用（例如我想在 js / ts 中调用我该怎么办）
结果就是又回到了 template 中一个个的当做组件使用
但并不是不能解决，在第二章中要实现无非就是将一个 vnode 节点渲染到 html 当中，用某种手段传入销毁的方法给予组件自身。
经过了长时间的积累...（咕咕咕
我制作了 unoverlay-vue，他用于更加简单方便制作和二次封装 overlay 层。

原理大同小异，就是利用 vue render 和闭包得到销毁组件自身的方法给予组件。

这个工具可以用于：

制作类似于 element-plus/naiveui/vuetifyjs/vant... 的 Message 或 Dialog
同时支持两种调用方式（组件 / javascript-api）
使用现有组件库（如 element-plus）集成和定制化功能

使用 unoverlay-vue 定制化组件以 element-plus@2.15.7(dialog) 为例（你也可以使用其他组件库）
?? Install

pnpm add unoverlay-vue # Or Yarn yarn add unoverlay-vue

在 main.js 中全局安装可以使所有 overlay 继承应用上下文(appContext)

// main.js import { createApp } from 'vue' import App from './App.vue' import unoverlay from 'unoverlay-vue'const app = createApp(App) app.use(unoverlay) app.mount('#app')

定制 el-dialog 组件

创建回调后，在 Javascript / Typescript 中调用

import { transformOverlay } from 'unoverlay-vue' import OverlayComponent from './overlay.vue' // 转换为命令式回调 const callback = transformOverlay(OverlayComponent) // 调用组件并获取 confirm 回调的值 const value = https://www.it610.com/article/await callback({ title:'myElDialog' }) // value =https://www.it610.com/article/=="myElDialog:confirmed"

或在 setup 中调用

import { useOverlayCall } from 'unoverlay-vue' import OverlayComponent from './overlay.vue'const value = https://www.it610.com/article/await useOverlayCall(OverlayComponent, { props: { title:'useOverlay' } }) // value =https://www.it610.com/article/=="useOverlay:confirmed"

或在 template 中调用

更多可查看 unoverlay-vue#cn-docs
该项目还在实验阶段，欢迎 commit | issue