Vuetify V-Select样式：太大

Question

有没有可能在Vuetify中减小v-select的高度？我不明白为什么这些元素如此大/宽...

---

我的代码是：

<template>
  <div>
    <v-select
      outline
      dense
      v-model="filtresActivites"
      :items="activitesGroupees"
      item-text="activiteNomComplet"
      item-value="activiteCode"
      multiple
    >
      <template v-slot:selection="{ item, index }">
        <span v-if="index === 0" class="deep-orange--text">{{ filtresActivites.length }} activités</span>
      </template>
    </v-select>
  </div>
</template>

您可以像这样在v-select中添加height属性：

:style="{ height: '30px' }" 我在组件的样式中添加了.v-select__selections { min-height: 30px }，但它没有生效。

- Ricou

---

你能发布你的代码吗？我们无法想象它是什么样子... - Toodoo

显然它们并不是为了与按钮相匹配而设计的，要么尝试使用大按钮，要么使用CSS更改v-select的大小。https://vuetifyjs.com/en/components/selects#select - Flame

我尝试改变CSS，但这并不容易。例如，在v-select中使用style="height:20px"是无效的。 - Ricou

我认为你正在寻找 v-overflow-btn，请参考 https://vuetifyjs.com/en/components/overflow-btns/。 - Victor Perez

Answer 1

您可以像这样为您的 v-select 添加 height 属性：

<v-select
 :items="items"
 height=50
></v-select>

如果您想更改v-select的CSS属性，可以通过添加此类来实现。

.v-select__selections {
     min-height: 30px
}

min-height 默认为 42px

如果我们看不到你的代码，那么很难理解你的问题

- DjSh

---

请确保在 App.vue 中添加样式，否则它将被默认样式覆盖。我在 Codepen 中尝试了你的代码，height=50 改变了 v-select 的高度。使用 solo 属性也会减小高度。另一件有帮助的事情是您可以检查元素并查看哪个类正在添加高度。复制类名并全局更改高度（即在 App.vue 中）。 - DjSh

Answer 2

在 v-select 中，您不必使用outline样式。请将其删除。

vuetify 的示例图片：

- klawdyo