element-plus中messageBox中绑定vnode节点

315 阅读1分钟

使用这个Vnode的原因是因为业务中需要一个弹框回调一下接口,但是弹框里只需要一个选择框,如果用弹框的话,觉得代码多,里面就放一项不值得。其实就是懒的写那么多东西!!直接上代码

ElMessageBox({
	title: "补报",
	message: () =>
		h(ElDatePicker, {
			modelValue: repayVal.value,
			type: "dates",
			placeholder: "请选择补报时间",
			dateFormat: "YYYY-MM-DD",
			valueFormat: "YYYY-MM-DD",
			style: "width: 100%",
			"onUpdate:modelValue": (val: string) => {
				repayVal.value = val;
			}
		}),
	showCancelButton: true,
	showConfirmButton: true,
	beforeClose: async (_, _1, done) => {
		if (repayVal.value) {
			const { ok } = await fetchRebooking({ reportDay: repayVal.value });
			if (ok) {
				ElMessage.success("补报成功");
			}
		}
		done();
	}
});

看element-plus官网的示例感觉有点麻烦,在想能不能直接双向绑定使用的数据,比如如果vnode是个input怎么绑定 也去查看了vue官网中 h() 创建虚拟 DOM 节点 (vnode)的用法也找到(应该是自己比较菜,没看过源码不了解h函数的具体用法)。公共GTP(现在已经离不开了,比百度强太多了)查阅到

image.png

重点就是onUpdate:modelValue这个方法

在此记录一下~~~