代码:
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open () {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
// MessageBox 的自定义类名
customClass: 'btn-cancle-right'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
// 在单页面使用不可以加scoped限制,否则不生效
<style lang="scss">
/* 可以把这个btn-cancle-right类放置到公共的样式文件中,
这样就可以只定义一次,多次重复使用啦 */
.btn-cancle-right {
.el-message-box__btns {
.el-button:nth-child(1) {
float: right;
}
.el-button:nth-child(2) {
margin-right: 10px;
background-color: #2d8cf0;
border-color: #2d8cf0;
}
}
}
</style>
图示: