vue-cli —— 如何局部修改Element样式


Posted in Javascript onOctober 22, 2020

最近在做vue项目时用到了Element,发现这玩意儿用起来很舒服,很新颖,上手也很快,而且效果足够酷炫。但是后面发现一个很大的问题,那就是Element的样式有限,这极大地限制了项目的应用广度,所以我们有必要对Element内部的CSS进行一定的覆盖,来改变其样式。在修改Element样式时,遇到了一些问题,这里简单做一些记录,便于以后查阅。

我在用el-switch做开关切换时,使用默认样式:

代码如下:

vue-cli —— 如何局部修改Element样式

效果:

vue-cli —— 如何局部修改Element样式

现在我想把蓝色字体改为其他颜色,但是我发现无论我如何修改样式,界面始终没有任何变化,所以我想到可能是需要覆盖Element默认的el-switch样式。于是,我找呀找,找呀找,终于在node_modules/element-ui/lib/theme-chalk下找到了对应的默认样式,如下所示:

Element默认样式:

vue-cli —— 如何局部修改Element样式

vue-cli —— 如何局部修改Element样式

于是,我想着把,这下问题能解决了,我开开心心地在自己的组件里把对应的样式覆盖了:

vue-cli —— 如何局部修改Element样式

我鸡冻的点了一下刷新,发现并没有什么卵用,还是以前熟悉的面孔:

vue-cli —— 如何局部修改Element样式

我不服气,继续百度,似乎看到一丝曙光,按照网上说的,在样式的color后面加了 !important ,然后心情美丽地刷新了一下,还是老样子,我一个七尺男儿简直想哭,崩了.....

vue-cli —— 如何局部修改Element样式

vue-cli —— 如何局部修改Element样式

我仍不死心,继续找度娘,终于老天不负有心人,我get到了我的宝贝,把样式单独写在外面就成功了。

vue-cli —— 如何局部修改Element样式

惊喜之余,我发现,这种修改方式存在一个bug,那就是其他页面的样式同时也会被修改成这种样式。我忽的想起,style标签上添加的scoped属性,是表示它的样式作用于当下的模块,很好的实现了样式私有化的目的。如果不加scoped属性,这个样式就具有全局属性。因此,一旦在不加scoped属性的情况下,样式被覆盖,那么整个项目使用到该标签时的样式都会跟着被覆盖。

所以问题又来了,如何让该覆盖样式只在当下组件起作用呢?问谁呢?继续找度娘呗.......(才疏学浅,只会度娘....),找啊找,找啊找,费了好大劲,终于找到了答案。就是简单地用scoped和>>>符号进行穿透。何谓穿透?(引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。这时就要通过特殊的方式,来穿透scoped。)

最后大功告成,如下:

vue-cli —— 如何局部修改Element样式

vue-cli —— 如何局部修改Element样式

注意:

1.这里的  >>> 可以用 /deep/ 替换掉,这里的 /deep/ 操作符是 >>> 的别名,同样也可以正常工作。

2.这里的 !important 不加其实也没毛病,但是因为这是使用第三方库的样式,所以在覆盖样式时最好加上 !important ,这样才能指明优先级。

以上就是vue-cli —— 如何局部修改Element样式的详细内容,更多关于vue 修改Element样式的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
js数据类型检测总结
Aug 05 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
微信小程序入门之绘制时钟
Oct 22 #Javascript
微信小程序入门之指南针
Oct 22 #Javascript
微信小程序实现拼图小游戏
Oct 22 #Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 #Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 #Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 #Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 #Javascript
You might like
PHP 变量的定义方法
2010/01/26 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
简述php环境搭建与配置
2016/12/05 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 迭代器和iter()函数详解及实例
2017/03/21 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python 实现A*算法的示例代码
2018/08/13 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python2与Python3的区别点整理
2019/12/12 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
Python 如何展开嵌套的序列
2020/08/01 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
买房委托公证书
2014/04/08 职场文书
党员目标管理责任书
2014/07/25 职场文书
买房协议书范本
2014/10/23 职场文书
实习指导教师评语
2014/12/30 职场文书
万里长城导游词
2015/01/30 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
2015年司法局工作总结
2015/05/22 职场文书