Vue3 优雅的模态框封装方案
站长
· 阅读数 274
Mr Mao'blog - gitee.io/mao-blog
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 组件
<!-- overlay.vue -->
<template>
<el-dialog :title="title" :visible.sync="visible" @close="cancel()">
<!-- 你的定制化内容 -->
<button @click="confirm(title + ':confirmed')"></button>
</el-dialog>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
import { useOverlayMeta } from 'unoverlay-vue'
const props = defineProps({
title: String,
// 如果你还想将其用作 template 中的组件使用,
// 你需要在 props 中定义 visible 字段
visible: Boolean
})
// 从 useOverlayMeta 获取 Overlay 信息, 这里利用了 vue 的 inject
const { visible, confirm, cancel } = useOverlayMeta({
// 弹出层动画的持续时间, 可以避免组件过早被销毁
// 仅在 template 中使用 component 则不需要定义
animation: 1000
})
</script>创建回调后，在 Javascript / Typescript 中调用
import { transformOverlay } from 'unoverlay-vue'
import OverlayComponent from './overlay.vue'
// 转换为命令式回调
const callback = transformOverlay(OverlayComponent)
// 调用组件并获取 confirm 回调的值
const value = await callback({ title: 'myElDialog' })
// value === "myElDialog:confirmed"或在 setup 中调用
import { useOverlayCall } from 'unoverlay-vue'
import OverlayComponent from './overlay.vue'
const value = await useOverlayCall(OverlayComponent, {
props: { title: 'useOverlay' }
})
// value === "useOverlay:confirmed"或在 template 中调用
<!-- overlay.vue -->
<template>
<overlay-component
v-model:visible="visible"
@confirm="confirm"
@cancel="cancel"
>
</overlay-component>
</template>
<script setup>
import OverlayComponent from './overlay.vue'
const visible = ref(false)
const confirm = () => {
// ...
}
const cancel = () => {
// ...
}
</script>更多可查看 unoverlay-vue#cn-docs