解决vue scoped html样式无效的问题


Posted in Javascript onOctober 24, 2020

1、问题场景

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

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

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

2、问题分析scoped属性

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

解决vue scoped html样式无效的问题

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

解决vue scoped html样式无效的问题

那么问题来了,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是一致的会生效。

解决vue scoped html样式无效的问题

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

解决vue scoped html样式无效的问题

3、解决办法

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

解决vue scoped html样式无效的问题

但是新问题来了,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慎用

scoped表示当前style属性只属于当前模块

实现原理:

vue通过在DOM结构以及css样式上加上唯一的标记 data-v-469af010,保证唯一,

问题:

1.父组件无scoped属性,子组件带有scoped,父组件是无法操作子组件的样式的(原因在原理中可知),虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件

2.父组件有scoped属性,子组件无,父组件也无法设置子组件样式,因为父组件的所有标签都会带有data-v-469af010唯一标志,但子组件不会带有这个唯一标志属性,与1同理,虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件

3.父子组建都有,同理也无法设置样式,更改起来增加代码量

因此如果组件内部还有组件,只会给最外层的组件里的标签加上唯一属性字段,不影响组件内部引用的组件( 注意 )

方案:

1.混合使用全局属性和局部属性

<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>

2.深选择器

<template>
 <div id="app">
  <gHeader></gHeader>
 </div>
</template>
<style lang="css" scoped>
 .gHeader /deep/ .name{ //第一种写法
  color:red;
 }
 .gHeader >>> .name{  //二种写法
  color:red;
 }
</style>

以上这篇解决vue scoped html样式无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
angular.js实现购物车功能
Oct 23 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 #Javascript
Ant Design的Table组件去除
Oct 24 #Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 #Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 #Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 #Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 #Javascript
jquery插件懒加载的示例
Oct 24 #jQuery
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
php命名空间学习详解
2014/02/27 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php数组查找函数总结
2014/11/18 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Python三元运算实现方法
2015/01/12 Python
Python pymongo模块常用操作分析
2018/09/01 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
pytorch masked_fill报错的解决
2020/02/18 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
python中的时区问题
2021/01/14 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
观看《永远的雷锋》心得体会
2014/03/12 职场文书
车辆转让协议书
2014/04/15 职场文书
2014年除四害工作总结
2014/12/06 职场文书
六年级学生评语大全
2014/12/26 职场文书
幼儿园见习总结
2015/06/23 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
用Python实现Newton插值法
2021/04/17 Python
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server