有些東西非常走心，更像是提醒着在路上的人們，勿忘初心甚至是找回初心《Do You Remember》
Vue簡單封裝一個elementUI消息確認框
elementUI中的消息確認框在方法中觸發就可以，但是會有很多地方用到所以簡單封裝一下
( 下面的圖是沒有封裝之前的 )
下面開始封裝:
封裝:
掛載到Vue實例上也就是在main.js上寫給他的原型加一個屬性為$alertMsgBox ( 用的時候直接 this.$alertMsgBox()調用就可以)
Vue.prototype.$alertMsgBox = function alert(
//這些都是參數 不傳參的時候默認顯示以下定義的
msg = "是否確認新建",
title = "系統提示",
title1 = "此項為新建一名用戶",
iconType = "el-icon-warning",
//圖標類型
iconColor = "#ccc",
//圖標顏色
settings = {}
) {
Object.assign(settings, {
//合並對象
confirmButtonText: "確定",
cancelButtonText: "取消",
dangerouslyUseHTMLString: true //允許確認框內容為html格式
});
return this.$confirm(
//定義樣式已經設置為html格式，可以自定義( 這里我直接寫了內聯，哈哈哈哈 )
`
<div style="height:94px;margin:auto;border-bottom:1px solid #ccc;display:flex;justify-content: center;">
<i class=${iconType} style=" font-size:43px;align-self: center;margin-right:5px;color:${iconColor}"></i>
<span style="display:block;align-self: center;margin-left:5px">
<p style="font-weight:bold;color: #6C6C6C;font-size: 15px;">${msg}</p>
<p style="color: #ABA5A5;">${title1}</p>
</span>
</div>
`,
//把定義的參數反出去
title,
settings,
title1,
iconType,
iconColor
);
};
使用的時候傳參不傳參默認顯示實例中定義的
第一參數：第一個提示內容
第二個參數：標頭提示內容
第三個參數：第二個提示內容
第四個參數：圖標類型 icon的className
第五個參數：圖標顏色
方法中使用:
this.$alertMsgBox(
"是否確認新建",
"系統提示",
"此項為新建一名用戶1",
"el-icon-warning",
"#688ef7"
)
.then(() => {
this.$router.push({ path: "/newEditUser" });
this.$message({
type: "success",
message: "已跳轉"
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消"
});
});
封裝一點一點學，代碼一點一點優化，哪怕是省去一個花括號
elementUI消息提示簡單封裝
創建一個js文件
這兩個參數就是消息提示中的狀態和內容
export function alertOK(msg, title) { this.$message({ type: msg, message: title }); } export default alertOK;
函數名隨便起，完成操作后倒出去在main.js引入設置全局 import message from "./common/message/inedx.js";
給它的原型加一個屬性為$messageOK可以直接使用了 Vue.prototype.$messageOK = message;頁面中使用: this.$messageOK("info", "已取消"); this.$messageOK("success", "已成功");
