我想增加Vuetify v-autocomplete的高度,它固定在304 px(可能是计算值,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深选择器,但他们似乎只有工作时,有一个父子层次结构,这是不是在这里的情况。
2条答案
按热度按时间nuypyhwy1#
有一个menu-props属性,你可以传递给v-autocomplete来定制它的下拉菜单(包括max-height)。
cclgggtu2#
你试过输入lang=scss并用途::v-deep吗?也许“deep”可以帮助你以你想要的方式改变样式