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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
javascript之可拖动的iframe效果代码
Aug 01 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
Vue简单实现原理详解
May 07 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 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 CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Fabric 应用案例
2016/08/28 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
十八届三中全会宣传方案
2014/02/21 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
Python实战之疫苗研发情况可视化
2021/05/18 Python