外网专门做钙片的网站,网站建设 会计科目,网站建设服务协议 印花税,中国建筑公司企业排名我们知道在 Vue 中#xff0c;style可以用两种方式来导入#xff1a;// method1import (./a.css);//method2复制代码但是不管哪一种#xff0c;导进的css文件都是应用于全局的#xff0c;有时候我们不想要这样的效果。而要使得css只对当前的组件有效#xff0c;即局部应用…我们知道在 Vue 中style可以用两种方式来导入// method1import (./a.css);//method2复制代码但是不管哪一种导进的css文件都是应用于全局的有时候我们不想要这样的效果。而要使得css只对当前的组件有效即局部应用。vue中提供了scoped属性可以很好地解决该问题。当我们有如下应用场景时新的问题又出现了export default {data () {return {}},props: {mhtml: String}}// some stylesheets to imploy to v-html复制代码该组件中的style如果设置为scoped那么style不会应用到 v-html中如果不设置为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 对于方法一css module是一个解决全局变量和代码依赖的规范原理是对声明了module的样式表中的样式赋予哈希class名 可以参考 官网以及阮一峰老师的文章对于方法二意思是在全局变量中通过特殊的命名(比如说BEM)来手动约束样式显示可惜以上都不是我想要的解决方案在Stack Overflow中找到了第三种解可以使用 deep scoped 来实现对v-html的样式应用并且不设置为全局代码如下export default {data () {return {}},props: {mhtml: String}}.markDivh1,h2,h3,h4,h5,h6{font-family: PT Sans,SF UI Display, .PingFang SC,PingFang SC, Neue Haas Grotesk Text Pro, Arial Nova, Segoe UI, Microsoft YaHei, Microsoft JhengHei, Helvetica Neue, Source Han Sans SC, Noto Sans CJK SC, Source Han Sans CN, Noto Sans SC, Source Han Sans TC, Noto Sans CJK TC, Hiragino Sans GB, sans-serif;text-rendering:optimizelegibility;margin-bottom:1em;font-weight:bold; line-height: 1.8rem;}复制代码这样一来 这些样式就会影响该组件的子组件其中的v-html自然也会因之而改变但又不会『污染』全局很好地fix我们的问题。那么原理是什么呢我们在vue-loader的release说明 中发现从v12.2.0开始加了这么一个特性
