Element UI MessageBox 增加第三个按钮（DOM Hack 方案）

Element UI 的 MessageBox 官方只支持 确认 / 取消 两个按钮。

如果必须继续使用 MessageBox 且 UI 上需要 3 个按钮，只能通过 DOM hack 实现。

⚠️ 注意：此方案非官方支持，适合老项目或临时需求。

实现思路

1. 通过 customClass 给 MessageBox 添加唯一类名

2. 弹框渲染完成后，手动向按钮容器 .el-message-box__btns 中插入一个按钮

3. 在按钮点击事件中执行业务逻辑并关闭弹框

示例代码

this.$msgbox({
  title: '操作确认',
  message: '请选择你的操作',
  showCancelButton: true,
  confirmButtonText: '提交',
  cancelButtonText: '取消',
  customClass: 'three-btn-msgbox'
}).then(() => {
  this.submit()
}).catch(() => {
  this.cancel()
})

this.$nextTick(() => {
  const btnBox = document.querySelector(
    '.three-btn-msgbox .el-message-box__btns'
  )
  if (btnBox && !btnBox.querySelector('.extra-btn')) {
    const btn = document.createElement('button')
    btn.className = 'el-button el-button--warning extra-btn'
    btn.innerText = '保存'
    btn.onclick = () => {
      this.save()
      document
        .querySelector('.three-btn-msgbox .el-message-box__close')
        .click()
    }
    btnBox.insertBefore(btn, btnBox.firstChild)
  }
})

风险说明

1. 依赖 Element UI 内部 DOM 结构

2. 框架升级可能导致失效

3. 不适合封装为公共组件

4. 极易污染其他的弹框

总结

1. MessageBox 想要 3 个按钮，只能 hack；
2. 能用 el-dialog 的场景，永远优先 el-dialog。
3. 如果不是必须继续使用 MessageBox，还是推荐用 el-dialog 实现此需求。