element-ui中this.$confirm提示文字中部分有颜色自定义方法
作者：Uaenali
this.$confirm是一个Vue.js中的弹窗组件,其样式可以通过CSS进行自定义,下面这篇文章主要给大家介绍了关于element-ui中this.$confirm提示文字中部分有颜色的自定义方法,需要的朋友可以参考下
如图
想要让element-ui中的提示文字中，部分有颜色可以如下设置：
MessageBox 组件可以通过传递一个 HTML 片段来自定义对话框内容的样式。 注意，在使用 MessageBox 组件时需要添加 dangerouslyUseHTMLString: true 选项来启用自定义 HTML 片段。
可以直接这么写
this.$confirm('请确认是否将该干预策略<span style="color: red;">下线</span>，确认后立即生效。', '下线确认', {
confirmButtonText: '确定下线',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
type: 'warning',
}).then(() => {
// 确认操作的代码
}).catch(() => {
// 取消操作的代码
});
也可以封装成一个变量
为了确保代码的可读性和可维护性，通过字符串模板来动态生成对话框的内容。
handleOffline(row) {
const operationText = '<span style="color: red;">下线</span>';
this.$confirm(
`请确认是否将该干预策略${operationText}，确认后立即生效。`, '下线确认',
{
confirmButtonText: '确定下线',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
}
).then(() => {
const params = {
type: 'offline',
};
lineMaterial(params, row.id).then(res => {
if (res.status === 200) {
this.init();
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消',
});
});
},附：elementUI this.$confirm 文字大小样式
dangerouslyUseHTMLString:true // message部分 以html片段处理
customClass //MessageBox 的自定义类名 整个comfirm框自定义类名
cancelButtonClass // 取消按钮的自定义类名
confirmButtonClass // 确定按钮的自定义类名
<style>
.addcomfirm{
width: 500px;
}
.addqd,.addqx{
font-size: 20px;margin-top: 20px;
}
.addqx{
margin-right: 50px;
}
</style>style部分注意不要加scoped，注意dialog弹出层与页面元素的同级
总结
到此这篇关于element-ui中this.$confirm提示文字中部分有颜色自定义的文章就介绍到这了,更多相关element-ui提示文字颜色自定义内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！