随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

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=>{

})
}
 
复制代码

 

posted on   小虾米吖~  阅读(780)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天:
2019-07-23 vue创建脚手架 cil

点击右上角即可分享
微信分享提示