element MessageBox 实现底部三个按钮或者更多按钮—开箱即用

效果图： 

思路：

使用 el-dialog组件实现的。开箱即用，可以直接拿我的代码组件直接引入 方便使用

代码：

html代码

<template><el-dialog custom-class="myConfirmation" :visible.sync="dialogVisible" :title="title" width="420px" :before-close="handleClose"><div class="dialog-content"><i style="color: #e6a23c; font-size: 24px !important; margin-left: 1px" :class="iconClass" class="icon"></i><span>{{ message }}</span></div><span slot="footer" class="dialog-footer"><el-button size="small" v-for="(button, index) in buttons" :key="index" :type="button.type" @click="handleButtonClick(button.action)">{{ button.text }}</el-button></span></el-dialog>
</template>

js代码

<script>
export default {props: {title: {type: String,default: "提示",},message: {type: String,required: true,},icon: {type: String,default: "el-icon-warning",},buttons: {type: Array,default: () => [{ text: "取消", type: "default", action: "cancel" },{ text: "确定", type: "primary", action: "confirm" },],},},data() {return {dialogVisible: true,};},computed: {iconClass() {return this.icon;},},methods: {handleClose() {this.$emit("close");},handleButtonClick(action) {this.$emit("action", action);this.dialogVisible = false;},},
};
</script>

css样式代码

<style lang="scss">
.myConfirmation {font-size: 18px;border-radius: 4px;// 修改样式让对话框水平垂直居中position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);margin: 0 !important;padding-bottom: 10px;.el-dialog__header {padding: 15px 15px 10px !important;}.el-dialog__body {padding: 10px 15px;color: #606266;font-size: 14px;}.el-dialog__footer {padding: 5px 15px 0;}.dialog-content {display: flex;align-items: center;}.icon {font-size: 24px;margin-right: 10px;}
}
</style>