解决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 相关文章推荐
javascript onmouseout 解决办法
Jul 17 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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
东方红 - 来复式再生机的修复
2021/03/02 无线电
PHP 定界符 使用技巧
2009/06/14 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
js选择器全面解析
2016/06/27 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
JS实现的base64加密解密操作示例
2018/04/18 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Django框架请求生命周期实现原理
2020/11/13 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
质量月口号
2014/06/20 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python