我有一个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
元素选择器,就像有p
和h1
元素选择器一样,那就太好了。但是,似乎没有,我必须添加class="bar"
才能选择它们。
我的问题是,是否有更简洁的方法来选择bar
元素。
在bar
组件中添加CSS代码并不好,因为当bar
用于其他组件时,我不想要隐藏它们。
答案 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>