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）只接受一個引數物件，相比於封裝好的，頁面的可配置樣式更靈活

出現這種頁面 只有$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旭，轉載請註明原文連結：https://www.cnblogs.com/zjxlicheng/p/15166115.html