elementui Notification通知自定义按钮(官方只有两个按钮:确认和取消,我的需求是三个按钮)
1、二次封装Notification
openMessageBox(val) {
return new Promise((resolve, reject) => {
const h = this.$createElement
this.$msgbox({
title: '告警确认处理',
showClose:false,
closeOnClickModal:false,
closeOnHashChange:false,
message: h('div', null, [
h('i', {
class: 'el-icon-warning',
style: 'color: #FCBE2D;font-size: 18px !important;margin-right: 10px;'
}),
h('div', {style:'margin-bottom:10px;'}, `确认内容: ${val.confirmContent}?`),
h('div', {style:'margin-bottom:10px;'}, `规则名:【${val.ruleName || ''}】${val.alarmValue}`),
h('div', {style:'margin-bottom:10px;'}, `规则类型: ${val.ruleTypeName || ''}`),
h('div', {style:'margin-bottom:10px;'}, `推送类型: ${val.pushTypeName || ''}`),
h(
'div',
{
style: 'display:flex;justify-content: flex-end;justify-content: flex-end;margin-top: 10px;margin-bottom: -10px;'
},
[
h(
'el-button',
{
class: 'el-button--warning',
on: {
click: () => {
resolve('0')
}
}
},
'误报'
),
h(
'el-button',
{
class: 'el-button--primary',
on: {
click: () => {
resolve('1')
}
}
},
'正确报警'
),
h(
'el-button',
{
class: 'el-button--success',
on: {
click: () => {
resolve('2')
}
}
},
'正确报警并执行控制指令'
)
]
)
]),
showCancelButton: false,
showConfirmButton: false,
callback: () => {}
})
})
},
2、使用:传递对象
this.openMessageBox(val).then((res)=>{
this.dealWithConfirm(res); // res为区分按钮点击的参数
})
// 告警确认处理
dealWithConfirm(_type) {
//confirmStatus 确认状态(0误报、1正确报警、2正确报警并执行控制指令)
let params = {
alarmRecordNo: this.$store.state.user.confirmData.alarmRecordNo,
confirmStatus: _type
}
handleConfirm(params).then(res => {
this.$message.success(res.message);
this.$msgbox.close()
}).catch(err=>{
})
}
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/18318272
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2019-07-23 vue创建脚手架 cil