如何使用 CSS 设置（覆盖）Vuetify v-autocomplete 列表框（结果区域）的高度？答案

【问题标题】：How to set (override) the height of a Vuetify v-autocomplete listbox (results area) using CSS?如何使用 CSS 设置（覆盖）Vuetify v-autocomplete 列表框（结果区域）的高度？
【发布时间】：2023-01-13 06:11:38
【问题描述】：

我想增加 Vuetify v-autocomplete 的高度，固定为 304px（可能是计算值，YMMV）。

<v-autocomplete
    class="flex-grow-0 ml-16 mr-6 largecontent"
    prepend-inner-icon="mdi-magnify"
    v-model="select"
    :items="items"
    item-text="name"
    item-value="id"
    :search-input.sync="search"
    hide-no-data
    label="Search anything (press /)"
>
    <template #item="{ item }">
        <v-list-item to="item.route">
            <v-list-item-content>
                <v-list-item-title v-text="item.name"/>
                <div
                    v-if="item.desc"
                    v-html="item.desc"
                />
            </v-list-item-content>
        </v-list-item>
    </template>
<v-autocomplete/>

这些都有效，但会将样式应用于全部v-autocomplete，我们不想要的：

<style>
    .v-autocomplete__content {
        max-height: 600px !important;
    }
</style>

<style>
    .v_menu__content {
        max-height: 600px !important;
    }
</style>

所以，我想要么范围

<style scoped>
    .v-autocomplete__content {
        max-height: 600px !important;
    }
</style>

或者在我的全局 css 文件中添加一个条目，例如：

.largecontent.v-autocomplete__content  {
  max-height: 600px !important;
}

但似乎没有任何效果，也尝试了 Vuetify 深度选择器，但它们似乎只在存在父子层次结构时才起作用，而这里不是这种情况。

【问题讨论】：

标签： css vue.js css-selectors vuetify.js

【解决方案1】：

有一个 menu-props 属性，您可以将其传递给 v-autocomplete 以自定义其下拉菜单（包括最大高度）。

<v-autocomplete :menu-props="{ maxHeight: 500 }">...

【讨论】：

【解决方案2】：

您是否尝试过放置 lang=scss 并使用 ::v-deep？也许“深”可以帮助你按照你想要的方式改变风格

【讨论】：

我尝试了各种变体，但无法正常工作。然而，在 v-autocomplete 中有一个允许设置高度的选项道具。