使用vue-cl如何局部修改Element样式

发布时间:2020-10-26 15:19:17 作者:Leah
来源:亿速云 阅读:242

本篇文章给大家分享的是有关使用vue-cl如何局部修改Element样式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

代码如下:

使用vue-cl如何局部修改Element样式

效果:

使用vue-cl如何局部修改Element样式

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

Element默认样式:

使用vue-cl如何局部修改Element样式

使用vue-cl如何局部修改Element样式

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

使用vue-cl如何局部修改Element样式

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

使用vue-cl如何局部修改Element样式

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

使用vue-cl如何局部修改Element样式

使用vue-cl如何局部修改Element样式

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

使用vue-cl如何局部修改Element样式

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

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

  最后大功告成,如下:

使用vue-cl如何局部修改Element样式

使用vue-cl如何局部修改Element样式

注意:

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

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

以上就是使用vue-cl如何局部修改Element样式,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

推荐阅读:
  1. Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
  2. vue中element组件样式修改无效怎么办

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue-cli vue element

上一篇:使用微信小程序绘制时钟的方法

下一篇:微信小程序对应canvas绘图绘制动态时钟

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》