Vue:通过CSS选择组件最简洁的方法是什么?

时间:2018-01-16 18:22:32

标签: vue.js vue-component

我有一个bar组件。它的使用方式如下:

<template>
  <div>
    <!-- stuff -->
    <bar></bar>
    <!-- stuff -->
    <!-- stuff -->
    <!-- stuff -->
    <bar></bar>
    <!-- stuff -->
    <bar></bar>
    <!-- stuff -->  
  </div>
</template>

<style lang="scss" scoped>
  @media (max-width: 1300px) {
    // this selector doesn't work, but it would be nice if it did
    bar {
      display: none;
    }
  }
</style>

我想在屏幕为1300px或更窄时隐藏条形元素。如果有bar元素选择器,就像有ph1元素选择器一样,那就太好了。但是,似乎没有,我必须添加class="bar"才能选择它们。

我的问题是,是否有更简洁的方法来选择bar元素。

bar组件中添加CSS代码并不好,因为当bar用于其他组件时,我想要隐藏它们。

2 个答案:

答案 0 :(得分:1)

一堂课似乎是最好的选择。如果您希望它对组件是通用的,则将其放在组件的根元素上,或者如果您希望它特定于该用途,则将其放在组件标记上。

此外,您没有理由不能使用自定义标记作为组件的根元素;只要标记没有映射到组件,它就会留在DOM中,您可以将它用于CSS选择。不过,我不推荐它,因为我不认为这个用例是引入新标签的好理由。

如果您的组件模板如下所示,例如:

<template>
  <bar-container>
    Hi there
  </bar-container>
</template>

并且您没有定义bar-container组件,您可以使用CSS选择bar-container,这将是每个bar组件的容器元素。但是,使用<div class="bar-container">代替它也很容易。

答案 1 :(得分:0)

在更好地理解手头的问题之后,这会有用吗?

<div class="someClass">
    <bar v-bind:width="draw.probability" type="draw" ref="myComponent"></bar>
</div>