基于ElMessageBox创建虚拟dom对话框

在提交表单的场景下，如果只有几个表单，不想单独创建一个对话框Dialog然后引用，通过使用vue3的h函数创建虚拟dom然后展示在ElMessageBox，这样可以通过promis回调，灵活的控制对话框打开关闭，也不用重新单独写一个文件来引入渲染。

<template>
	<div>
		<div @click="open">全局消息</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, onMounted, h } from 'vue';
import { ElInput, ElMessageBox } from 'element-plus';

const state = reactive({
	name: '',
	age: '',
});

onMounted(() => {});

const vNode = () => {
	return h('div', {}, [
		h('div', { style: 'margin-bottom: 10px;' }, [
			h('div', {}, '姓名'),
			h(ElInput, {
				modelValue: state.name,
				'onUpdate:modelValue': ($event: any) => {
					state.name = $event;
				},
				placeholder: '请输入姓名',
			}),
		]),
		h('div', {}, [
			h('div', {}, '年龄'),
			h(ElInput, {
				modelValue: state.age,
				'onUpdate:modelValue': ($event: any) => {
					state.age = $event;
				},
				placeholder: '请输入年龄',
			}),
		]),
	]);
};

const open = () => {
	ElMessageBox({
		title: '基本信息',
		message: () => vNode(),
		// 允许拖动
		draggable: true,
		// 不允许点击遮罩层关闭
		'close-on-click-modal': false,
	}).then(() => {
		console.log(state, 'state');
	});
};
</script>

<style scoped lang="scss"></style>