如何使用 CSS 设置(覆盖)Vuetify v-autocomplete 列表框(结果区域)的高度?
How to set (override) the height of a Vuetify v-autocomplete listbox (results area) using CSS?
我想增加 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/>
这些都有效,但会将样式应用于 ALL 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 深度选择器,但它们似乎仅在存在父子层次结构时才起作用,而这里并非如此。
您是否尝试过放置 lang=scss 并使用 ::v-deep?
也许“deep”能帮你把风格改成你想要的样子
有一个 menu-props 属性,您可以将其传递给 v-autocomplete 以自定义其下拉菜单(包括 max-height)。
<v-autocomplete :menu-props="{ maxHeight: 500 }">...
我想增加 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/>
这些都有效,但会将样式应用于 ALL 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 深度选择器,但它们似乎仅在存在父子层次结构时才起作用,而这里并非如此。
您是否尝试过放置 lang=scss 并使用 ::v-deep? 也许“deep”能帮你把风格改成你想要的样子
有一个 menu-props 属性,您可以将其传递给 v-autocomplete 以自定义其下拉菜单(包括 max-height)。
<v-autocomplete :menu-props="{ maxHeight: 500 }">...