V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
imherer
V2EX  ›  Vue.js

请教一个 vue 全局 css 问题

  •  
  •   imherer · 2020-04-15 17:43:54 +08:00 · 3256 次点击
    这是一个创建于 1668 天前的主题,其中的信息可能已经有所发展或是发生改变。

    首先我用了 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 条附言  ·  2020-04-16 10:23:47 +08:00
    感谢各位 /deep/ 解决了

    我一后端,之前没听说过还有 /deep/ 这个东西…… 学到了~
    18 条回复    2020-04-23 11:16:34 +08:00
    ayase252
        1
    ayase252  
       2020-04-15 17:45:31 +08:00 via iPhone   ❤️ 1
    ......二次封装一下组件
    vex2
        2
    vex2  
       2020-04-15 17:47:00 +08:00   ❤️ 1
    写两个全局 class 加到 component 不同页面的指令里
    cyrbuzz
        3
    cyrbuzz  
       2020-04-15 17:47:04 +08:00   ❤️ 1
    仅仅解决了这个问题的方法...
    给 B 里的加 scoped...

    ```
    <style scoped>
    .van-image__img {
    border-radius: 0;
    }
    </style>
    ```
    imherer
        4
    imherer  
    OP
       2020-04-15 17:47:21 +08:00
    @ayase252 好的,我去看看如何封装

    我一后端……硬生生被拉来写前端...
    just1
        5
    just1  
       2020-04-15 17:47:29 +08:00 via Android   ❤️ 1
    多几层选择器咯,比如弄一个 b 独有的父 class
    ochatokori
        6
    ochatokori  
       2020-04-15 17:48:32 +08:00 via Android   ❤️ 1
    给 a 页面加个类名呗…
    imherer
        7
    imherer  
    OP
       2020-04-15 17:48:55 +08:00
    @cyrbuzz 试过了
    .van-image__img 是 vant 框架里 css,在 scoped 里不生效
    imherer
        8
    imherer  
    OP
       2020-04-15 17:50:42 +08:00
    @ochatokori
    @vex2
    我最开始就想这样解决,但是它这个 van-image 组件解析之后是一个 div 里面套了一个 img,加了 clas 是直接加到了 div 上,是过用 css 选择器给子元素添加 css 也不生效
    karott7
        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 下面,这样就不会出现层主那样的问题了
    Mozshaw
        10
    Mozshaw  
       2020-04-15 18:51:08 +08:00   ❤️ 1
    /deep/ selector
    zhuweiyou
        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")
    jingcoco
        12
    jingcoco  
       2020-04-15 19:01:50 +08:00 via Android   ❤️ 2
    /deep/ 了解一下。我之前遇到过类似的 ,scoped 导致无法穿透的,可以用这个做前缀
    yeyeboy
        13
    yeyeboy  
       2020-04-15 19:15:56 +08:00   ❤️ 1
    scoped 穿透里面的组件,我一般是在图片外面加一层容器,然后像下面这样
    .van ::v-deep .van-image__img {
    border-radius: 0;
    }
    = ,= 你要是没别的办法可以试试这个(不保证能用哈)
    choujiaojiao
        14
    choujiaojiao  
       2020-04-15 19:17:32 +08:00   ❤️ 1
    /deep/
    xuxuxu123
        15
    xuxuxu123  
       2020-04-15 19:18:49 +08:00   ❤️ 1
    /deep/ 是对的
    目前在用
    Parabolazz
        16
    Parabolazz  
       2020-04-15 19:44:29 +08:00   ❤️ 1
    /deep/ 可以在 scoped 下影响到内部的选择器
    zhw2590582
        17
    zhw2590582  
       2020-04-15 19:58:36 +08:00 via iPhone   ❤️ 1
    给不同页面分配不同的类名就可以区分开啦
    Elephant696
        18
    Elephant696  
       2020-04-23 11:16:34 +08:00
    css 环境可以用 >>> 穿透符,less 环境可以用 /deep/ 穿透符,dart-sass 环境可以用 ::v-deep 穿透符,node-sass 环境忘了,好像也是 /deep/ 穿透符
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2764 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 01:59 · PVG 09:59 · LAX 17:59 · JFK 20:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.