Vue3中Element Plus ElMessageBox按钮自定义全攻略

1. 项目背景与需求解析

在Vue3项目中使用Element Plus组件库时，ElMessageBox作为常用的模态对话框组件，其默认的按钮样式和布局往往无法满足特定业务场景的需求。最近在开发一个后台管理系统时，我们遇到了几个典型问题：

• 需要将确认按钮放在左侧，取消按钮放在右侧
• 要求按钮采用项目自定义的颜色方案
• 需要在按钮旁边添加辅助图标
• 希望支持不同尺寸的按钮组合

这些需求促使我们对原生ElMessageBox进行二次封装。Element Plus虽然提供了丰富的API，但关于按钮自定义的文档相对分散，需要结合多个配置项才能实现完整效果。

2. 技术方案设计

2.1 基础实现原理

Element Plus的MessageBox组件实际上是基于Promise的异步组件，其核心方法包括：

• ElMessageBox.alert
• ElMessageBox.confirm
• ElMessageBox.prompt

这些方法都返回一个Promise实例，可以通过.then和.catch处理用户操作。自定义按钮的关键在于理解三个核心配置项：

javascript复制const options = {
  confirmButtonText: '自定义确定文本',
  cancelButtonText: '自定义取消文本',
  showCancelButton: true // 是否显示取消按钮
}

2.2 进阶自定义方案

要实现更复杂的按钮定制，需要深入使用ElMessageBox的options参数：

javascript复制ElMessageBox({
  title: '提示',
  message: '确认执行此操作吗？',
  showCancelButton: true,
  confirmButtonClass: 'custom-confirm', // 自定义确认按钮类名
  cancelButtonClass: 'custom-cancel',   // 自定义取消按钮类名
  buttonSize: 'small',                 // 统一设置按钮尺寸
  // 更多自定义配置...
})

3. 完整实现代码

3.1 基础封装示例

首先创建一个customMessageBox.js工具文件：

javascript复制import { ElMessageBox } from 'element-plus'

export const confirm = (options) => {
  const defaultOptions = {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showCancelButton: true,
    confirmButtonClass: 'custom-confirm-btn',
    cancelButtonClass: 'custom-cancel-btn',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        // 异步操作示例
        setTimeout(() => {
          done()
          instance.confirmButtonLoading = false