中国建设银行亚洲网站,江门seo计费管理,荣成建设局网站,定制平台有哪些最近在做一个项目#xff0c;是对富文本编辑器生成的 HTML 渲染到页面中#xff0c;大家都会想到当然是用 Vue 的 v-html 属性#xff0c;于是我写下了这样的代码templatediv classcontent-html v-htmlarticle.contentHtml /
/…最近在做一个项目是对富文本编辑器生成的 HTML 渲染到页面中大家都会想到当然是用 Vue 的 v-html 属性于是我写下了这样的代码templatediv classcontent-html v-htmlarticle.contentHtml /
/template style langscss scoped
.content-html {p {font-size: 16px;}a {color: blue;}}
/style然而 style 并没有生效解决方法 一去掉 style 标签中的 scoped但是这个方法并不建议取消了 scoped 属性就会污染全局变量可能导致不可预估的后果如何 fix 呢 官方给出了两个解决方法In single-file components, scoped styles will not apply to content inside v-html, because that HTML is not processed by Vue’s template compiler. If you want to target v-html content with scoped CSS, you can instead use CSS modules or an additional, global style element with a manual scoping strategy such as BEM.在单文件组件中带有 scoped 属性的 styles 不会作用于 v-html 里的内容因为 v-html 里面的内容并没有经过 Vues template compiler 的处理。官方建议的解决方法一css module 是一个解决全局变量和代码依赖的规范原理是对声明了 module 的样式表中的样式赋予哈希 class 名可以参考 官网 或 阮一峰老师的文章官方建议的解决方法二意思是在全局变量中通过特殊命名 (比如 BEM) 来手动约束样式 - BEM书写规范可惜以上都不是我想要的解决办法最终我在 Stack Overflow 中找到了另一种解决思路另一种解决思路可以使用deep scoped来实现对v-html的样式应用并且不设置为全局deep 选择器在 CSS 的写法是 templatediv classcontent-html v-htmlarticle.contentHtml /
/template style scoped
.content-html { p {font-size: 16px;} a {color: blue;}}
/style可惜 在 sass/less 中不作用我们需要用 /deep/ 来代替 写法style langscss scoped
.content-html {/deep/ p {font-size: 16px;}/deep/ a {color: blue;}}
/style如果没解决问题由于我的项目需要后端渲染我使用了 nuxt.js 框架不知道什么原因 和 /deep/ 都不起作用最后的救命稻草 ::v-deep style langscss scoped
.content-html {::v-deep p {font-size: 16px;}::v-deep a {color: blue;}}
/style这样一来这些样式就会影响到该组件的子组件v-html 中的内容也因此而改变但又不会 污染 全局
