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

品克缤2026-01-14 23:50

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

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

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

实现思路

通过 customClass 给 MessageBox 添加唯一类名
弹框渲染完成后，手动向按钮容器 .el-message-box__btns 中插入一个按钮
在按钮点击事件中执行业务逻辑并关闭弹框

示例代码

javascript 复制代码

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)
  }
})

风险说明

依赖 Element UI 内部 DOM 结构
框架升级可能导致失效
不适合封装为公共组件
极易污染其他的弹框

总结

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