我有一个 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>
我想在屏幕为 1300 像素或更窄时隐藏栏元素。如果有一个 bar
元素选择器就好了,就像有 p
和 h1
元素选择器一样。但是,似乎没有,我必须添加 class="bar"
才能选择它们。
我的问题是是否有更简洁的方法来选择 bar
元素。
在 bar
组件中添加 CSS 代码并不好,因为当在其他组件中使用 bar
时,我不根本不想隐藏它们。
最佳答案
上课似乎是最好的方式。如果您希望它对组件通用,则将其放在组件的根元素上;如果您希望它特定于该用途,则仅将其放在组件标签上。
此外,您没有理由不能将自定义标记用作组件的根元素;只要标签没有映射到组件,它就会留在 DOM 中,您可以使用它来选择 CSS。不过,我不推荐这样做,因为我认为这个用例不是引入新标签的好理由。
如果您的组件模板看起来像这样,例如:
<template>
<bar-container>
Hi there
</bar-container>
</template>
而你没有 bar-container
组件已定义,您将能够使用 CSS 来选择 bar-container
,这将是每个 bar
的容器元素成分。但它同样易于使用 <div class="bar-container">
相反。
关于vue.js - 视觉 : What is the cleanest way to select a component via CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48287567/