[Vue] 一种全新的弹窗写法！

<script lang="ts" setup>
import { ElDialog, ElButton } from 'element-plus';
// 上传类型Ref
const gatherUploadRef = ref<HTMLElement>(); // 2 , 3

// 切换上传类型
function changeUploadType() {
	const SelectComponent = {
		setup() {
			return () =>
				h(
					'div',
					{
						class: 'flex  items-center justify-between  py-10 px-20 w-600px',
					},
					[
						h(
							ElButton,
							{
								type: 'primary',
								onClick: () => {
									selectedButton.value = 1;
									file.value?.localUploadRef();
								},
							},
							() => '本地上传'
						),
						h(
							ElButton,
							{
								type: 'primary',
								onClick: () => {
									selectedButton.value = 2;
									gatherUploadRef.value?.click();
								},
							},
							() => '素材库上传'
						),
						h(
							ElButton,
							{
								type: 'primary',
								onClick: () => {
									selectedButton.value = 3;
									gatherUploadRef.value?.click();
								},
							},
							() => '采集上传'
						),
						h(
							ElButton,
							{
								type: 'primary',
							},
							() => '裁剪上传'
						),
					]
				);
		},
	};
	ElMessageBox.confirm(h(SelectComponent), '请选择图片上传方式', {
		showCancelButton: false,
		showConfirmButton: false,
		distinguishCancelAndClose: true,
		customClass: 'select-type-dialog',
		beforeClose: async (action, instance, done) => {
			try {
			} finally {
				done();
			}
		},
	});
}
</script>

<style>
.select-type-dialog {
	max-width: 600px !important;
}
</style>