Vue封装elementUI消息确认框+message消息提示--更新

有些东西非常走心，更像是提醒着在路上的人们，勿忘初心甚至是找回初心《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格式，可以自定义( 这里我直接写了内联，哈哈哈哈 )

<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", "已成功");