我想增加 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 深度選擇器，但它們似乎只在有父子層次結構時才有效，這里不是這種情況。
uj5u.com熱心網友回復：
有一個menu-props屬性，您可以將其傳遞給 v-autocomplete 以自定義其下拉選單（包括最大高度）。
<v-autocomplete :menu-props="{ maxHeight: 500 }">...
uj5u.com熱心網友回復：
您是否嘗試過放置 lang=scss 并使用 ::v-deep？也許“深”可以幫助你以你想要的方式改變風格
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/434697.html
標籤：css Vue.js css 选择器 Vuetify.js