element ui 12 中进度条标签不能展示_Vue Element-ui 全局变量

本文介绍了如何在Vue项目中批量修改Element UI组件样式,包括如何利用自定义主题和变量来改变默认样式,以及如何处理特殊情况下的组件样式定制,如使用深度选择器避免全局污染。
摘要由CSDN通过智能技术生成

和 Vue 配合最多的 ui 框架就是 element-ui 了,element-ui 有一套属于自己的样式。

而往往我们的 ui 同学会发挥自己的能力设计出或简洁或朴实或炫丽各种各样的设计稿,我们前端的工作就是实现它,尽可能还原到100%。

但是 ui 同学设计的和 element-ui 的默认样式存在些许差别,我们怎么修改呢?

说到这就到提及一点,每个 vue 组件内的 style 标签都会有一个 scoped 属性,它的作用就是让样式作用于当下的模块,不会影响其他模块同名的样式【举例:A组件有个名为cla的类,B组件也有一个cla的类,如果不加scoped,改变A的cla,B组件样式也会跟随变化。加上就不会跟随变化了】。

回到正题,我们用 button 举例。我们先看下 element-ui 的 button 样式

1a62ae6fcd432ac963dd135a0b213b4b.png

长得还挺漂亮的哈,如果 ui 同学给我们的设计稿所有按钮都是长方形非圆角的(类似第一种),我们需要每个按钮都要修改吗?显然不是

在 element-ui 的自定义主题中给我们提供了方法,虽然提供了方法,但是具体到修改某些样式的代码我们还是不清楚怎么写。

6b837e8c6ee0eee79a19b0b9802688c0.png

1). 首先 npm 安装 element-ui 的依赖,然后在 main.js 中引入,并加上这个scss

dbe2200eb2b61dc0f3af89cdfcb5e765.png

2). 找到 element 的默认配置 css 的文件,从中查看哪些变量可以修改,及修改的具体代码

node_modules / element-ui / packages / theme-chalk / src / common / var.scss

99d3b0f00bd64c5fd70500050211bf87.png

b2c565c45303dcf7c8217c6186c7ed59.png
里面代码很多,700多行

3). 找到我们想修改内容的代码,复制到你新建的 element-variables.scss 中

042fda1ac7d1b60230d45f6ddcfb05af.png

a3bd40dfb1cd03bbb7292dfe67f2ecf6.png

这样就能批量修改你想改变的样式了,而且不影响你组件内 scoped 的代码。

看到这里有人疑问了,它文件的 !default 是干什么的? 这个东西是默认使用,如果你有修改就会覆盖掉它的默认,需要注意一点:要写在 红框代码 的上面才起作用。

aa84d557120e97d211a625f2aabc2fdd.png

这样就解决了批量的问题了,大功告成~

别高兴太早,有些页面是特殊化定制的样式,举例:所有页面的 button 都是非圆角,但是只有 A 组件的 button 要求5px 的圆角,怎么办?

有三种方法实现:

1). 你刚才新建的 element-variables.scss 是一个全局的 scss 文件,你可以写在这里。但是不推荐,因为是全局文件,里面最好还是写一些全局的样式,如果有单独的有全局的很乱

2). 我们知道每个 vue 组件内是可以写多个 style 标签的,那我们写两个,单独定制的 css 写在加 scoped 的 style 内,全局的写在不加 scoped 的 style 中也是可以实现的,但是也不太推荐,这样会引起全局污染互相影响。

3). 使用 深度选择器,这样我们就能在组件内直接修改了,既不会引起全局污染也不会混乱。

深度选择器如何使用呢?

9294ea20bebdfd586119b038c09c4877.png

这个就是深度选择器的用法【.a >>> .b{} : 注意三个箭头左右各有一个空格

如果你的 css 语言使用的是 scss、less 或 stylus 等就这样写【.a /deep/ .b{}】

有的时候你使用了深度选择器但是样式还是没有修改,可能是权重的问题,加 !important 就好了【!前面要有空格,英文叹号】

4e387dfaa7e4541164bc2ea5757981e7.png

我们无法直接在带有 scoped 的组件中直接修改第三方 ui 库的默认样式。

我们有时 F12 检查的时候发现有的样式比较奇怪,长这个样子

c267c223c6043858313bbc00e6850582.png

这个 [data-v-b554e15c] 这个是干嘛的?这个是 scoped 机制自动给类添加的,保证了唯一性,防止全局污染。这就是为什么你在不同组件起了个相同的名字也不会相互影响的原因。

感觉不错点个留个关注吧。都是实战经验的干货哦~

你之前碰到这种问题是怎么样解决的呢?或者有什么更好的方法,欢迎评论,一起交流进步~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值