请教一个 vue 全局 css 问题

› Vue.js

This topic created in 2226 days ago, the information mentioned may be changed or developed.

首先我用了 vant 这个框架

在 A 页面里有很多图片，图片显示用的是 vant 里的图片组件（ van-image ），现在需要给图片加上圆角，于是我就用了全局的 css （ scoped 不生效）

<style>
.van-image__img {
  border-radius: 5px;
}
</style>

从 A 页面跳转到 B 页面后，B 页面也有很多图片，同样也是用的 van-image 显示的，现在需求是 B 页面图片不能有圆角，于是我又在 B 页面里把圆角去掉：

<style>
.van-image__img {
  border-radius: 0;
}
</style>

现在的问题是当从 B 页面返回到 A 页面的时候，A 页面的图片圆角也没了。各位大佬应该如何解决呢？

现在临时解决方案是 A\B 两页面一个页面用原始的 img 一个页面用 van-image

Supplement 1 · Apr 16, 2020

感谢各位 /deep/ 解决了

我一后端，之前没听说过还有 /deep/ 这个东西…… 学到了~

页面

圆角

图片

style

18 replies • 2020-04-23 11:16:34 +08:00

ayase252

Apr 15, 2020 via iPhone

......二次封装一下组件

vex2

Apr 15, 2020

写两个全局 class 加到 component 不同页面的指令里

cyrbuzz

Apr 15, 2020

仅仅解决了这个问题的方法...
给 B 里的加 scoped...

```
<style scoped>
.van-image__img {
border-radius: 0;
}
</style>
```

imherer

Apr 15, 2020

@ayase252 好的，我去看看如何封装

我一后端……硬生生被拉来写前端...

just1

Apr 15, 2020 via Android

多几层选择器咯，比如弄一个 b 独有的父 class

ochatokori

Apr 15, 2020 via Android

给 a 页面加个类名呗…

imherer

Apr 15, 2020

@cyrbuzz 试过了
.van-image__img 是 vant 框架里 css，在 scoped 里不生效

imherer

Apr 15, 2020

@ochatokori
@vex2
我最开始就想这样解决，但是它这个 van-image 组件解析之后是一个 div 里面套了一个 img，加了 clas 是直接加到了 div 上，是过用 css 选择器给子元素添加 css 也不生效

karott7

Apr 15, 2020

出现层主这样的问题是访问 A 页面就会加载 A 页面的 css 文件，再访问 B 页面就会加载 B 页面的 css 文件，有相同的属性就会覆盖掉。
加 scoped 是一个办法，但是如果在顶层定义了一个类，那么就不能用。
我是在每个页面的根元素加一个类，比如.a-wrapper 和.b-wrapper，然后 a 文件下的 css 类都写在对应的 wrapper 下面，这样就不会出现层主那样的问题了