日常开发记录-dangerouslyUseHTMLString:true; 属性的作用

将 dangerouslyUseHtmlString 属性设置为 true ,message 就会被当做 HTML 片段处理。

 案例 demo :

this.$notify({
        title: 'HTML 片段',
        dangerouslyUseHTMLString: true,
        message: '<div>这是 <i>HTML</i> 片段</div>'
      })

效果展示:

如果你在 Element Plus Notification 组件中使用了自定义 HTML 字符串,并且同时开启了 `dangerouslyUseHTMLString`,那么你需要确保你的 HTML 代码中使用的所有样式都是有效的 CSS 样式,而不是一些非标准的样式或未识别的属性,否则可能会导致样式混乱或乱码的问题。 如果你的样式表中包含了一些非标准的样式或未识别的属性,可以尝试使用标准的 CSS 属性来替换它们,或者使用内联样式来覆盖它们。例如,如果你的样式表包含了以下样式: ``` .my-custom-style { font-family: '微软雅黑'; -webkit-box-shadow: 0 0 10px #ccc; -moz-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } ``` 你可以将其替换为以下标准的 CSS 样式: ``` .my-custom-style { font-family: '微软雅黑', sans-serif; box-shadow: 0 0 10px #ccc; } ``` 如果你的样式表中包含了一些无法替换的样式,你可以尝试使用内联样式来覆盖它们。例如,如果你的样式表包含了以下样式: ``` .my-custom-style { background-color: #f00; color: #0f0; } ``` 你可以在 Element Plus Notification 组件中使用内联样式来覆盖它们: ``` ElNotification({ message: '<div style="background-color: #f00; color: #0f0;">' + successMessage + '</div>', dangerouslyUseHTMLString: true, type: 'success' }); ``` 这样就能确保你的样式能够正确地应用到 Element Plus Notification 组件中,而不会出现乱码或混乱的情况。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值