element MessageBox彈窗的使用

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 進行創建
$createElement是vue里面提供的一種js創建dom的一種方式
vue.$createElement(dom,optionObj,content）
接收三個參數 （要創建標簽 ，標簽內的屬性樣式，標簽內容）

	const h = this.$createElement;
	
	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, ', 是否繼續? '),
	])

第一個參數，跟第三個參數 很好理解 主要是第二個參數的使用
使用過jq的同學應該很熟悉里面的寫法，其實這個對象里面寫的就是相應標簽的屬性樣式
style attrs placeholder type 寫原生標簽樣式時 自帶的樣式通常都是標簽內直接寫，自己設定的私有屬性通過attrs來設定，domProps設定相應的顯示內容

---

寫element-ui結構

	const h = this.$createElement;
	 h('div', {attrs:{id:'msgbox',ref:'msgbox'}}, [
		 h('span', null, '此操作將對該水表進行 '),
		 h('el-select', { style: 'color: red;width:100px',props:{value:select,label:'欠費報停'},on:{
	 change:(e)=>{
		 console.log(select,e)
	 },
	 input:(e)=>{
		 console.log(e)
	 }
	 },placeholder:'請選擇'}, [
		 h('el-option',{props:{value:'欠費報停',label:'欠費報停'}},'欠費報停'),
		 h('el-option',{props:{value:'用戶報停',label:'用戶報停'}},'用戶報停'),
	 ]),
	 h('span', null, ', 是否繼續? '),
 ]),

通過$createElement ui框架通過 props進行設置 自定義屬性