首先我用了 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
1
ayase252 2020-04-15 17:45:31 +08:00 via iPhone 1
......二次封装一下组件
|
2
vex2 2020-04-15 17:47:00 +08:00 1
写两个全局 class 加到 component 不同页面的指令里
|
3
cyrbuzz 2020-04-15 17:47:04 +08:00 1
仅仅解决了这个问题的方法...
给 B 里的加 scoped... ``` <style scoped> .van-image__img { border-radius: 0; } </style> ``` |
5
just1 2020-04-15 17:47:29 +08:00 via Android 1
多几层选择器咯,比如弄一个 b 独有的父 class
|
6
ochatokori 2020-04-15 17:48:32 +08:00 via Android 1
给 a 页面加个类名呗…
|
8
imherer OP @ochatokori
@vex2 我最开始就想这样解决,但是它这个 van-image 组件解析之后是一个 div 里面套了一个 img,加了 clas 是直接加到了 div 上,是过用 css 选择器给子元素添加 css 也不生效 |
9
karott7 2020-04-15 18:47:56 +08:00 1
出现层主这样的问题是访问 A 页面就会加载 A 页面的 css 文件,再访问 B 页面就会加载 B 页面的 css 文件,有相同的属性就会覆盖掉。
加 scoped 是一个办法,但是如果在顶层定义了一个类,那么就不能用。 我是在每个页面的根元素加一个类,比如.a-wrapper 和.b-wrapper,然后 a 文件下的 css 类都写在对应的 wrapper 下面,这样就不会出现层主那样的问题了 |
10
Mozshaw 2020-04-15 18:51:08 +08:00 1
/deep/ selector
|
11
zhuweiyou 2020-04-15 18:52:05 +08:00 1
全局的 CSS 文件里写个
body.hello .van-image__img { border-radius: 5px; } 然后在 路由变化的钩子里 判断 是 A 页面 body.addClass("hello"),其他页面 body.removeClass("hello") |
12
jingcoco 2020-04-15 19:01:50 +08:00 via Android 2
/deep/ 了解一下。我之前遇到过类似的 ,scoped 导致无法穿透的,可以用这个做前缀
|
13
yeyeboy 2020-04-15 19:15:56 +08:00 1
scoped 穿透里面的组件,我一般是在图片外面加一层容器,然后像下面这样
.van ::v-deep .van-image__img { border-radius: 0; } = ,= 你要是没别的办法可以试试这个(不保证能用哈) |
14
choujiaojiao 2020-04-15 19:17:32 +08:00 1
/deep/
|
15
xuxuxu123 2020-04-15 19:18:49 +08:00 1
/deep/ 是对的
目前在用 |
16
Parabolazz 2020-04-15 19:44:29 +08:00 1
/deep/ 可以在 scoped 下影响到内部的选择器
|
17
zhw2590582 2020-04-15 19:58:36 +08:00 via iPhone 1
给不同页面分配不同的类名就可以区分开啦
|
18
Elephant696 2020-04-23 11:16:34 +08:00
css 环境可以用 >>> 穿透符,less 环境可以用 /deep/ 穿透符,dart-sass 环境可以用 ::v-deep 穿透符,node-sass 环境忘了,好像也是 /deep/ 穿透符
|