代码示例:
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '我修改了确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'refund-abort-message-box'
})
.then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style lang="less">
.refund-abort-message-box {
.el-message-box__btns {
.el-button--primary {
color: #fff;
background-color: #f56c6c;
border-color: #f56c6c;
&:hover,
&:focus {
color: #fff;
background-color: #f56c6c;
border-color: #f78989;
}
&:active {
color: #fff;
background-color: #f56c6c;
border-color: #dd6161;
}
}
}
}
</style>