通常使用 confirm 确认框时，一般这样写：
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
但偶尔也需要修改文字等样式，这时该怎么做呢？
一、 将
dangerouslyUseHTMLString属性设置为 true，message就会被当作 HTML 片段处理。
提示文字中，修改部分字体样式时，可以这样做：
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此操作将<span style="color: red;">永久删除</span>该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true, // 使用HTML片段
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>二、createElement 新建元素和对象，然后对新建的元素进行标签化设置。
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
const h = this.$createElement
this.$confirm(
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
message:h('p', null, [
h('span', null, '内容可以是 '),
h('i', { style: 'color: red' }, 'xxxxx')
]),
// iconClass:"el-icon-question colorYellow", // 需要修改 icon 图标，需要把注释代码打开，其中 colorYellow 表示图标颜色，(自定义图标的类名，会覆盖 type)
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>设置 iconClass 属性，可以更改icon：
三、文字换行显示
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
const confirmText = ['第一行内容', '第二行内容','第三行内容']
const newData = []
const h = this.$createElement
for (const i in confirmText) {
newData.push(h('p', null, confirmText[i]))
}
this.$confirm(
'提示',
{
title:'提示',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
message: h('div', null, newData),
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
四、使用 customClass 设置MessageBox 的自定义类名，从而自定义样式
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass:'del-model', // 设置MessageBox 的自定义类名
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
//注意这里不能将样式放到scoped中！！！
<style lang="scss">
.del-model {
.el-button:nth-child(1) {
width: 100px;//修改确认按钮的宽度
}
.el-button:nth-child(2) {
margin-right: 10px;
background-color: #2d8cf0;
border-color: #2d8cf0;
}
}
</style>
