elemenUI的messageBox弹窗 提供了 $alert、$confirm、$prompt、$msgbox

1.$alert、$confirm、$prompt 这几个用法比较相似 可参考 官网
$alert(message, title, options) 或 $alert(message, options)
$confirm(message, title, options) 或 $confirm(message, options)
$prompt(message, title, options) 或 $prompt(message, options)
这三种主要通过官网的api进行配置option,

2.$msgbox 是 $alert、$confirm、$prompt的低配版
原因是： $alert、$confirm、$prompt是基于$msgbox进行封装的
$msgbox（option）只接受一个参数对象，相比于封装好的，页面的可配置样式更灵活
element MessageBox弹窗的使用_JAVA
出现这种页面 只有$msgbox可以实现

const h = this.$createElement;
let select='欠费报停'
this.$msgbox({
	title: '消息',
	message: h('div', {attrs:{id:'msgbox',ref:'msgbox'}}, [
		h('span', null, '此操作将对该水表进行 '),
		h('select', { style: 'color: red;width:80px',domProps:{value:select},placeholder:'请选择'}, [
				h('option',{label:'欠费报停',attrs:{value:'欠费报停'}},'欠费报停'),
				h('option',{label:'用户报停', attrs:{value:'用户报停'}},'用户报停'),
			]),
		h('span', null, ', 是否继续? '),
	]),
	showCancelButton: true,
	confirmButtonText: '确定',
	cancelButtonText: '取消',
	beforeClose: (action, instance, done) => {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true;
			instance.confirmButtonText = '执行中...';
			setTimeout(() => {
				done();
				setTimeout(() => {
					instance.confirmButtonLoading = false;
				}, 300);
			}, 3000);
		} else {
			done();
		}
	}
	}).then((action, instance, done) => {
		this.$message({
			message: "报停成功",
			type: "success",
		});
		select='欠费报停'
	}).catch((action, instance, done)=>{
		select='欠费报停'
	})
}）

可编辑区域在js massage中使用$createElement 进行创建

本文来自博客园，作者：xiao旭，转载请注明原文链接：javascript:void(0)p/15166115.html