element-ui中this.$confirm提示文字中，部分有颜色（自定义）-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui中this.$confirm提示文字中，部分有颜色（自定义）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如图
confirm字体颜色更改,vue.js,前端,javascript

想要让element-ui中的提示文字中，部分有颜色可以如下设置：

MessageBox 组件可以通过传递一个 HTML 片段来自定义对话框内容的样式。注意，在使用 MessageBox 组件时需要添加 dangerouslyUseHTMLString: true 选项来启用自定义 HTML 片段。

可以直接这么写

this.$confirm('请确认是否将该干预策略<span style="color: red;">下线</span>，确认后立即生效。', '下线确认', {
  confirmButtonText: '确定下线',
  cancelButtonText: '取消',
  dangerouslyUseHTMLString: true,
  type: 'warning',
}).then(() => {
  // 确认操作的代码
}).catch(() => {
  // 取消操作的代码
});

也可以封装成一个变量

为了确保代码的可读性和可维护性，通过字符串模板来动态生成对话框的内容。文章来源地址https://www.toymoban.com/news/detail-730982.html

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: '已取消',
                });
            });
        },