1、问题场景

page1,page2都使用flexible移动端自适应的时候，有一个页面page2需要手动设置rem基准值，

//手动设置基准
html{ font-size: 120px !important;
}

但是在page2引用的self.less里面设置了基准，竟然没有生效

2、问题分析scoped属性

在引用self.less的时候，使用了属性scoped

vue中引入了scoped这个概念，设计思想就是让当前组件的样式不会修改到其他页面的样式，使用了data-v-hash的方式来使css有了他对应的模块的标识，通俗来说就是使用了scoped属性，template里面的html都会多一个data-v-hash的属性，css 选择器会根据data-v-hash来进行选择，当前的css文件只会对当前的页面生效。参考下图

那么问题来了,scoped只对当前组件里面的内容生效，会对组件里面的dom加data-v-hash属性，而不会对html,body等组件之外的dom添加,但是css里面的属性选择器都是data-v-hash属性的，参考下图，椭圆形里面是组件之外的，没有data-v-hash属性，所以加了scoped属性的css会对组件外无效。长方形里面的dom是组件里面的，data-v-hash跟css里面的data-v-hash是一致的会生效。

虽然css里面的body选择器也添加了data-v-hash，但是页面dom没有data-v-hash属性，所以css里面设置的body样式无效。

3、解决办法

针对必须设置属性scoped的组件，可以在page2.vue里面再单独写一个style，在页面里面单独写组件之外(html,body等)的样式，因为scoped不会对组件之外的dom增加data-v-hash属性

但是新问题来了，page2设置以后，影响了page1页面的布局，page1页面html的的font-size样式依然是120px，

当然会影响啊，page2也引用了page1的样式啊，但是page2设置了scoped，所以只有page2的html样式会影响page1，

解决办法就是再vue什么周期create里面，用js给html设置font-size

4、总结

遇到了这问题，终于搞明白了scoped染渲染规则，在添加了scoped属性的组件

给组件（template）里面的dom节点，加了一共不重复属性的data-v-hash，来标志唯一性
给组件里面引用的的样式文件，在每个选择器后面添加了一个等同于dom节点一样的data-v-hash字段，实现类似于作用域的问题，不影响全局
如果组件里面还有组件，只会给最外层的组件里面dom，添加data-v-hash,不会影响组件内部引用的组件

vue scoped html样式无效相关推荐

Vue的v-html样式无效问题
## 例如我在vue中添加了如下的v-html: 样式无效代码: <table class="table" v-html="table_data" wid ...
scoped 不生效_解决vue scoped scss 无效的问题
今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ .position-el-steps { /deep/ .el-step.is-vertical { .el-step__de ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
vue v-html 动态内容样式无效解决方法
vue v-html 动态内容样式无效解决方法参考文章: (1)vue v-html 动态内容样式无效解决方法 (2)https://www.cnblogs.com/mengfangui/p/122 ...
(javascript)vue项目打包后，写的覆盖element的样式无效了。这是什么原因？
问题: (javascript)vue项目打包后,写的覆盖element的样式无效了.这是什么原因?描述: 在开发模式模式下,写的覆盖样式都有效,打包后就无效,请问下是什么原因? main.js里的c ...
修改elementUI组件样式无效的多种解决方式
前言:vue+elementUI项目开发中,经常遇到修改elementUI组件样式无效的问题, 原因:在vue组件中我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加s ...
修改elementUI组件样式无效的问题研究
问题背景:el-tabs的选项卡默认字体是14px,大了,想改成12px,结果在style里面加样式总是不生效. 解决:样式放到app.vue里面,样式就生效了 .panel-content .el- ...
Vue 中英文组件样式写法
Vue 中英文组件样式写法 Vue 项目国际化样式处理一.全局(main.js)添加自定义指令: v-lang 会自动添加语言对应的 class [中:zh,英:en] Vue.direct ...
vue scoped关键字
简单来说,vue会把vue组件中<style>里的样式,都汇总到一个样式文件中,但是不同组件中相同名字的样式就会冲突,在<style scoped>中加上scoped后,就会对 ...

vue scoped html样式无效

1、问题场景

2、问题分析scoped属性

3、解决办法

4、总结

vue scoped html样式无效相关推荐

最新文章

热门文章