1)修改组件的样式,但是只作用于当前页面,其他页面不受影响,做法有两种:
法一:使用关键字“/deep/”
1)在当前页面添加样式:
<style lang="scss" scoped>
自定义类名 /deep/{
element ui选择器类名{
样式
}
}
</style>
2)
:在其他页面写样式再导入到所需页面
scss文件写法:
.xx /deep/{
element ui选择器类名{
样式
}
}
.vue页面引入必须加上scoped:
<style lang="scss" scoped>
@import "../../../styles/demo.scss";
</style>
法二:使用 ">>>" 也可实现相同效果(注意不要scss的预处理样式,否则也是没效果的)
<style scoped>
.xxx >>> .el-checkbox__label {
color: red;
}
</style>
总之:有scss的地方一定要用deep;不用scss时就要用>>>
element-ui修改全局样式且只作用于当前页面的更多相关文章
-
element ui 修改默认样式
修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...
-
vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
-
vue+element ui 表格自定义样式溢出隐藏
样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...
-
vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输
在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...
-
vue加scoped后无法修改样式(无法修改element UI 样式)
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...
-
vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...
-
vue 无法覆盖vant的UI组件的样式
vue 无法覆盖vant的UI组件的样式 有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将 ...
-
vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
-
vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
随机推荐
-
BZOJ 3110 【Zjoi2013】 K大数查询
Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c如果是2 a b c形式,表示询问从第a个位置到第b个位置 ...
-
进阶:使用 EntityManager
JPA中要对数据库进行操作前,必须先取得EntityManager实例,这有点类似JDBC在对数据库操作之前,必须先取得Connection实例,EntityManager是JPA操作的基础,它不是设 ...
-
【中国剩余定理】POJ 1006 &; HDU 1370 Biorhythms
题目链接: http://poj.org/problem?id=1006 http://acm.hdu.edu.cn/showproblem.php?pid=1370 题目大意: (X+d)%23=a ...
-
Lesson2.1:LinkedList、ConcurrentLinkedQueue、LinkedBlockingQueue对比分析
写这篇文章源于我经历过的一次生产事故,在某家公司的时候,有个服务会收集业务系统的日志,此服务的开发人员在给业务系统的sdk中就因为使用了LinkedList,又没有做并发控制,就造成了此服务经常不能正 ...
-
js检测浏览器中是否安装了flash播放插件
这两天工作中需要在网页中嵌入flash小游戏,我使用的是swfobject.js version:1.5.其他方面都很好,唯独版本检测这里一直没有搞通,后来实在无奈之下,改用js来检测浏览器的flas ...
-
MFC控件(9):network address control
这个控件的名字倒是取的不错,一看就知道是让你输入IP地址或host name的. 不过一打开看到那控件的样子就完全是个Edit control.不过该控件对应的类也确实是继承自类CEdit. 先拖个控 ...
-
Linux搭建NodeJs环境
文件下载与解压 文件下载 wget https://npm.taobao.org/mirrors/node/v6.10.3/node-v6.10.3-linux-x64.tar.xz 如果要下载最新版 ...
-
Java 中常见的数据结构
1.数据结构有什么作用? 当使用 Java 里面的容器类时,你有没有想过,怎么 ArrayList 就像一个无限扩充的数组,也好像链表之类的.很好使用,这就是数据结构的用处,只不过你在不知不觉中使用了 ...
-
Linux环境下搭建测试环境(LAMP详细说明)
一.安装虚拟机与CentOS7 传送门:https://www.cnblogs.com/mrgavin/p/9372393.html 注意:以下安装,我都是用的root权限. 二.安装Apache1. ...
-
Linux中read命令的用法—(6/30)
read命令是一个非常重要的bash命令,用于从键盘或者表中输入中文本,并且可以和用户进行交互:该命令可以一次读取多个变量的值,变量和输入的值都需要使用空格隔开.在read命令后面,如果没有指定变量名 ...