Vuetify v-select 菜單涵蓋文本字段輸入

Question

我不希望菜單覆蓋輸入框。 我的 Vuetify 版本是 2.3.18。 我該如何解決？

我發現了這個，但它對我不起作用： https : //codepen.io/jrast/pen/NwMaZE?editors=1010

我發現了一個 Vuetify github 錯誤： https : //github.com/vuetifyjs/vuetify/issues/2377

Vuetify v-select Codepen 示例： https ://codepen.io/zmrqodfu/pen/abZeVOP ? editors = 101

 Vue.use(Vuetify); var vm = new Vue({ el: "#app", methods: { }, data () { return { select: { state: 'Florida', abbr: 'FL' }, hideDetails: false, items: [ { state: 'Florida', abbr: 'FL' }, { state: 'Georgia', abbr: 'GA' }, { state: 'Nebraska', abbr: 'NE' }, { state: 'California', abbr: 'CA' }, { state: 'New York', abbr: 'NY' } ] } }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.3/vue.js"></script> <script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"></script> <link rel=stylesheet type="text/css" href="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.css"> <div id="app"> <v-app dark> <v-select v-bind:items="items" v-model="select" label="Select" single-line :hide-details="hideDetails" hint="Hint of Select" item-text="state" item-value="abbr" return-object autocomplete ></v-select> </v-app> </div>

Answer 1

您可以使用menu-props道具：

:menu-props="{ bottom: true, offsetY: true }"

或者，您可以通過以下方式手動定位菜單：

CSS

.v-menu__content {
   margin-top: 65px;
}

您更新的Codepen