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>