Element UI ElMessageBox.confirm 添加两个确认按钮

ElMessageBox.confirm 默认只有一个确认按钮和一个取消按钮，如果要添加两个确认按钮，则需要自定义 MessageBox。

以下是一个自定义 MessageBox 的例子：

<template>
  <div>
    <div v-if="visible" class="el-message-box__wrapper" :class="{ 'is-fullscreen': fullscreen }">
      <div class="el-message-box">
        <div class="el-message-box__header">
          <div class="el-message-box__title">{{ title }}</div>
          <div class="el-message-box__headerbtn">
            <i v-if="showClose" class="el-message-box__close el-icon-close" @click="handleAction('cancel')"></i>
          </div>
        </div>
        <div class="el-message-box__content">
          <div v-if="message" class="el-message-box__message">{{ message }}</div>
          <div v-if="message" class="el-message-box__message">{{ message2 }}</div>
          <div v-if="showInput" class="el-message-box__input">
            <el-input :type="inputType" :placeholder="inputPlaceholder" v-model="inputValue"></el-input>
          </div>
        </div>
        <div class="el-message-box__btns">
          <el-button v-if="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</el-button>
          <el-button v-if="showConfirmButton" type="primary" @click="handleAction('confirm')">{{ confirmButtonText }}</el-button>
          <el-button v-if="showConfirmButton2" type="primary" @click="handleAction('confirm2')">{{ confirmButtonText2 }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    message: {
      type: String,
      default: '',
    },
    message2: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'confirm',
    },
    showInput: {
      type: Boolean,
      default: false,
    },
    inputType: {
      type: String,
      default: 'text',
    },
    inputPlaceholder: {
      type: String,
      default: '',
    },
    inputValue: {
      type: String,
      default: '',
    },
    confirmButtonText: {
      type: String,
      default: '确定',
    },
    confirmButtonText2: {
      type: String,
      default: '确定2',
    },
    cancelButtonText: {
      type: String,
      default: '取消',
    },
    showCancelButton: {
      type: Boolean,
      default: true,
    },
    showConfirmButton: {
      type: Boolean,
      default: true,
    },
    showConfirmButton2: {
      type: Boolean,
      default: false,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    lockScroll: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      visible: false,
    };
  },

  methods: {
    handleAction(action) {
      if (action === 'confirm') {
        this.$emit('confirm', this.inputValue);
      } else if (action === 'confirm2') {
        this.$emit('confirm2', this.inputValue);
      } else {
        this.$emit('cancel');
      }
      this.visible = false;
    },

    open() {
      this.visible = true;
    },
  },
};
</script>

在组件中，我们添加了一个新的按钮`confirmButtonText2`，并定义了一个新的方法`handleAction('confirm2')`。

使用时，我们可以像这样调用自定义的 MessageBox：

this.$refs.customMessageBox.open({
  title: '标题',
  message: '消息',
  message2: '消息2',
  showConfirmButton2: true,
  confirmButtonText2: '确定2',
}).then((action) => {
  if (action === 'confirm') {
    console.log('点击了确定按钮');
  } else if (action === 'confirm2') {
    console.log('点击了确定按钮2');
  } else if (action === 'cancel') {
    console.log('点击了取消按钮');
  }
});