带你玩转 ui 框架 ——scoped及样式穿透问题详解

前言

在我们前端的开发中经常会使用到各种 ui 框架 下面这两个是比较火的,也是我常用的两个ui框架。
在这里插入图片描述

在这里插入图片描述

问题描述

但是在使用框架的时候难免会遇到需要改变组件中的一些样式,当然如果我们所有页面的组件样式都是统一的话,我们可以进行全局设置样式,但是如果我们仅仅在一个页面中需要个性化的样式设置,我们平常会下面这样操作:

<style lang="less" scoped>
#main {width: 100%;height: 90%;
}
.ivu-form .ivu-form-item-label {color: #fff;
}
.ivu-table th {height: 60px !important;
}
.ivu-table td {height: 45px !important;
}
.conLeft {width: 78%;height: 100%;padding: 10px;position: relative;img {width: 100%;height: 100%;}.smaBox {cursor: pointer;position: absolute;width: 40px;height: 40px;}
}
</style>

不难看出我们上面的很多类名就是我们组件中自带的,我们只有通过这些类名去更改我们当前页面组件呈现的样式,但是因为我们在当前页面中去编写的样式只想让其应用在当前的页面中,所以我们在style中去添加了scoped属性,关于scoped属性的讲解我们放到下面去讲解;

先回到我们上面的代码中,看似没有任何问题我们去通过类名改变组件的样式,但是他不会生效,就是因为scoped属性导致的问题,在我们的Vue项目中scoped属性真的很好用,为我们避免了组件之间的样式覆盖,使我们定的样式不会造成全局的污染!

解决办法 - 样式穿透即可

首先我们要搞明白添加上scoped属性后发生了什么,如果您着急解决问题可以直接看我们这个小节的问题解决,如果您想知其然知其所以然,那么您现在可以先去看文章的下一小节——scoped属性的原理。

使用样式穿透去解决 scoped 带来的问题,样式穿透有四种形式:
不太推荐第一种写法,不同浏览器的展示形式不一样,容易出问题,2、3、4这几种都是有预处理器(less, scss, sass)的写法,推荐大家使用第二、三种,

  1. stylus的样式穿透 使用 >>>
  2. /deep/
  3. ::v-deep
  4. 去掉scoped
    将scoped属性去掉。虽然很方便 但是失去了样式的保护,我们就需要用原始的方法保护该组件的样式作用域,可通过后台选择器等等方式实现样式的保护,使其不受污染。好像更麻烦了。

在这里插入图片描述
上面我通过使用第二种方式 轻松实现了

scoped属性的原理

为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措

我们可能只了解他的作用就是为了让当前组中的style中的样式,仅仅对当前组件生效,对原理可能不太懂,那下面小编就带大家梳理一下scoped的原理。

scoped的用法
<template><div class="box">欢迎您的光临</div>
</template><style lang="less" scoped>.box{background-color:green;}
</style>
  • 从上面的代码中我们可以看出我们的scoped属性就是直接写到我们的style标签当中,使用就是这么简单
设置scoped属性后发生了什么

设置上了scoped 实际上我们是将代码通过 PostCss 进行了转换,下面我们进行一下对比

PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css,有兴趣的同学可以去了解一下关于PostCss中的一些常用插件,让你的css更哇塞

转换前:

<template><div class="box">欢迎您的光临</div>
</template><style lang="less" scoped>.box{background-color:green;}
</style>

转换后:


<template><div class="box" data-v-21aa888a>欢迎您的光临</div>
</template><style>.example[data-v-21aa888a] {color: red;}
</style>
  • 上面对比后大家应该就懂了是怎么回事了吧,其实说白了加上scoped后vue编译过程中会生成一个唯一的data-xxx标志,样式后面会跟上该标志,以避免污染全局样式
  • 在父组件中设置了scoped中的样式 如果该组件中有子组件 那子组件的根元素中也会继承父组件中生成的style的唯一标识
慎用scoped

上面我们看到了scoped这个属性很香,其实他隐藏了很多坑

  • 大家都知道css样式有一个优先级的说法,scoped的这一操作,虽然达到了组件样式模块化的目的,但是会造成一种后果:每个样式的权重加重了:理论上我们要去修改这个样式,需要更高的权重去覆盖这个样式。这是增加复杂度的其中一个维度,所以如果要达到修改样式的目的,就必须加重我们要修改样式的权重(增加选择器层级,ID选择器,并列选择器,impotant等)
  • 还有一种情况就是我们的两个组件中均含有scoped 而且一个组件中包含了另一个组件,所以在Dom渲染的时候会在dom节点上加上很多唯一style的标识,有的是继承的,有的是自己组件的,所以我们在修改样式的时候还是会涉及到上面所说的权重问题,如果做不好可能会出现尴尬的问题就是自己的组件修改不了自己组件的样式哈哈
  • 最后的问题就是我们上面抛出的问题,当我们设置此属性后我们想要改变组件中的样式是改变不了的,当然我们可以通过强大样式穿透进行解决!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248673.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Npoi Web 项目中(XSSFWorkbook) 导出出现无法访问已关闭的流

NPOI生产.xlsx文件件时&#xff0c;在使用book.Write(ms);后&#xff0c;会关闭流&#xff0c;这样导致再次使用Respons输出流的时候就出错了。 造成关闭流的主要原因有时其实是跨域&#xff0c;同域是没有问题的。 //新建类 重写Npoi流方法 public class NpoiMemoryStream : M…

三分钟带你掌握 CSS3 的新属性

文章目录1. css3简介2. css3边框2.1 边框圆角2.2 边框阴影3. css3背景3.1背景图大小3.2背景图起始点4. css3文本效果4.1 文本阴影4.2 文本换行5. css3字体图标6. css32D转换7. css3 3D转换8. css3 transition8.1 单项改变8.2 单项改多项改变9. css3 动画1. css3简介 CSS 用于控…

用 div 仿写 input 和 textarea 功能

div仿写input和textarea input不能换行&#xff0c;textarea也不能跟随内容多少而增加高度。 contenteditable true; <div class"msg_content" contenteditable"true" placeholder在这里输入您的留言或建议></div> .msg_content {box-sizing:…

Vue项目中如何设置动态的TDK

TDK是什么 TDK就是网站的标题&#xff08;title&#xff09;、描述&#xff08;description&#xff09;和关键词&#xff08;keyword&#xff09; TDK在哪里 上面大佬对TDK的概念解释的很全面&#xff0c;但是在网页中的TDK在哪里呢&#xff0c;作为开发人员打开F12我们就…

[Pytorch]Pytorch的tensor变量类型转换

原文&#xff1a;https://blog.csdn.net/hustchenze/article/details/79154139 Pytorch的数据类型为各式各样的Tensor,Tensor可以理解为高维矩阵。与Numpy中的Array类似。Pytorch中的tensor又包括CPU上的数据类型和GPU上的数据类型&#xff0c;一般GPU上的Tensor是CPU上的Tenso…

PHP从零开始--基础篇

一、 变量 1.1概念 变量是存储数据的用的容器。 1.2定义变量 变量名的语法规则&#xff1a; 可以是数字、字母、下划线&#xff0c;但是不能以数字开头不能出现空格变量名是区分大小写变量名不能是系统中的关键字行业约定的语法规范 驼峰命名法 比如 myname 定义成 myNam…

node

‎ Table of Contents 1. 全局对象2. 代码执行优先级3. 模块导入4. 模块加载 4.1. 文件模块优先级4.2. 文件夹加载优先级 4.2.1. 包&#xff08;文件夹&#xff09;下的入口文件优先级4.2.2. 包加载优先级5. 核心模块的简单使用 5.1. events1 全局对象 globalconsole.log(globa…

一个关于WCF调用远程链接返回405错误不允许使用此方法的问题

最近在调试WCF的接口时一直返回“405不允许使用此方法”&#xff0c;这个问题困扰了大半天&#xff0c;网上查了各种办法&#xff0c;但是每个人遇到的问题不同还是不能解决。 最后无意之中发现问题所在&#xff0c;记录一下帮助后面的同学解决问题。 WCF远程方法会配置属性Web…

PHP从零开始--循环数组

一、循环 1.1单层for循环 1.1.1基础语法 for(初识变量;结束范围;累加/累减){ 重复执行的代码 } 1、 先初识化变量$i 2、 $i<100表达式进行判断 3、 跳入循环&#xff0c;执行重复代码 4、 累加或者累加 5、 再进行$i<100表达式判断 6、 再跳入循环&#xff0c;执行重复…

Spring Cloud(F版)搭建高可用服务注册中心

上一篇文章【Spring Cloud搭建注册中心】成功搭建了一个Eureka Server服务注册中心&#xff0c;不过相信细心的朋友都会发现&#xff0c;这个服务注册中心是一个单节点服务注册中心&#xff0c;万一发生故障或者服务器宕机&#xff0c;那所有的服务可就不能使用了&#xff0c;这…

Python(60)_闭包

1 、闭包的概念 #-*-coding:utf-8-*- 1、闭包&#xff1a;内部函数调用外部函数的变量def outer():a 1def inner():print(a)print(inner.__closure__) outer() print(outer.__closure__) 2 闭包的使用 #-*-coding:utf-8-*- 1、闭包&#xff1a;内部函数调用外部函数的变量 …

PHP从零开始--错误处理函数

一、错误处理 1.1错误种类 1.1.1Notices 比如没有定义变量确使用了会报notice错误&#xff0c;只是提醒注意&#xff0c;不影响后续代码执行 1.1.2Warnings 这是警告错误&#xff0c;比如include引入一个并不存在的文件&#xff0c;不影响后续代码执行 1.1.3Fatal Erro…

第四单元博客总结——暨OO课程总结

第四单元博客总结——暨OO课程总结 第四单元架构设计 第一次UML作业 简单陈述 第一次作业较为简单&#xff0c;只需要实现查询功能&#xff0c;并在查询的同时考虑到性能问题&#xff0c;即我简单的将每一次查询的结果以及递归的上层结果都存储下来&#xff0c;使用一个Boolean…

两列布局:6种方法

面试过程中总会文档两列布局&#xff0c;左边等宽&#xff0c;右边自适应几种方法&#xff1f;以下提供6种为君解忧 <div id"wrap"><div id"left"></div><div id"right"></div> </div>需求就是左侧定宽&…

PHP从零开始--数据库

文章目录一、 数据库简介1.1概念1.2命令行操作1.3连接数据库1.4配置环境变量二、 数据库的相关操作2.1显示所有仓库2.2创建仓库2.3删除仓库2.4切换仓库三、 数据表的相关操作3.1概念3.2显示所有的数据表3.3创建数据表3.2修改字段名3.3查看表结构3.4添加字段3.5删除字段3.6更改数…

常用SQL语句

将记录的某一字段值设置为空&#xff08;null&#xff09;UPDATE 表名 SET 字段名NULL WHERE 条件字段名123; 更新整列为某个值UPDATE 表名 SET 字段名NULL 转载于:https://www.cnblogs.com/zhcBlog/p/10254066.html

如何下载js类库

https://bower.io/ 这个已经淘汰 https://learn.jquery.com/jquery-ui/environments/bower/ Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you. Keeping track of all these packages and mak…

Python 常用系统模块整理

Python中的常用的系统模块中部分函数等的整理 random: 随机数sys: 系统相关os: 系统相关的subprocess: 执行新的进程multiprocessing: 进程相关threading: 线程相关pickle: 将对象转换成二进制文件time: 时间datetime: 基本的日期和时间类型timeit: 准确测量小段代码的执行时间…

PHP从零开始--字段修饰符数据操作SQL语言

文章目录一、 字段修饰符1.1主键1.2自动增长1.3非空1.4默认值1.5外键二、 对数据的操作2.1增加数据2.2删除数据2.3更新数据2.4查询数据2.4.1查询所有的数据2.4.2查询指定字段2.4.3去除重复字段2.4.4where表达式详解2.4.5分组查询2.4.6排序三、 SQL语言3.1DML3.2DDL3.3DCL一、 字…

scrapy爬虫框架windows下的安装问题

windows操作系统python版本是3.6.0通过Anaconda命令conda install scrapy安装scrapy,安装过程中没有问题。然后在命令行输入命令准备新建项目时&#xff0c;输入 scrapy startproject firstscrapy时出现了from cryptography.hazmat.bindings._openssl import ffi, libImportErr…