如何用Vue的h函数封装命令式的dialog组件？
摘要：场景 有些时候我们的页面是有很多的弹窗 如果我们把这些弹窗都写html中会有一大坨 因此：我们需要把弹窗封装成命令式的形式 命令式弹窗使用弹窗的组件 <template> &
场景
有些时候我们的页面是有很多的弹窗
如果我们把这些弹窗都写html中会有一大坨
因此：我们需要把弹窗封装成命令式的形式
命令式弹窗
// 使用弹窗的组件
<template>
<div>
<el-button @click="openMask">点击弹窗</el-button>
</div>
</template>
<script setup lang="ts">
import childTest from '@/components/childTest.vue'
import { renderDialog } from '@/hooks/dialog'
function openMask(){
// 第1个参数：表示的是组件，你写弹窗中的组件
// 第2个参数：表示的组件属性，比如：确认按钮的名称等
// 第3个参数：表示的模态框的属性。比如：模态宽的宽度，标题名称，是否可移动
renderDialog(childTest,{},{title:'测试弹窗'})
}
</script>
// 封装的弹窗
import { createApp, h } from "vue";
import { ElDialog } from "element-plus";
export function renderDialog(component:any,props:any, modalProps:any){
const dialog = h(
ElDialog, // 模态框组件
{
...modalProps, // 模态框属性
modelValue:true, // 模态框是否显示
}, // 因为是模态框组件，肯定是模态框的属性
{
default:()=>h(component, props ) // 插槽，el-dialog下的内容
}
)
console.log(dialog)
// 创建一个新的 Vue 应用实例。这个应用实例是独立的，与主应用分离。