Message Box确认消息弹框组件，简单封装+样式修改

element样式

修改后的样式

如果多个页面调用，可以把方法写进mixin里

// 确认框操作
      sureAgree(callback) {
        const Url = require('../../assets/img/问题.png')  // 这里用require才能找到图片
        this.$confirm('<img src=' + Url + '><p>您确定同意该操作？</p>', '确认提示', {
          dangerouslyUseHTMLString: true,  // 字符串需要加这一行
          cancelButtonClass: 'btn-custom-cancel', // 取消的按钮样式，如果只加这个，确定就会放到最前面了，如果想要确定在后面，需要把确定的按钮样式也加上或者删掉取消的样式
          customClass: 'messageBox_class', // 类名，修改样式，可以把想要修改的样式都放这里面，不会造成污染
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        }).then(valid => {
          if (callback) {
            callback() 
          }
        }).catch(() => {
          console.log('取消')
        })
      },

// 封装后的代码调用
open(row) {
      this.sureAgree(async() => {
        const res = await getPurchaseAgreementAgree({ id: row.id, status: 5 })
        if (res.code === 0) {
          this.$message.success('操作成功！')
          this.handleQuery()
          return
        }
        this.$message.error('操作失败！')
      })
    },

样式的话，其实没什么了，放一个标题的样式吧

.el-message-box__title{
    ::before{
      content: '';
      margin-right: 8px;
      width: 4px;
      height: 16px;
      background: rgb(66, 123, 252);
      display: inline-block;
    }
  }