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