Vuetify v-select 菜单涵盖文本字段输入

Question

我不\xe2\x80\x99不希望菜单覆盖输入框。我的 Vuetify 版本是 2.3.18。我该如何解决？

\n

我发现了这个，但它对我不起作用：\n https://codepen.io/jrast/pen/NwMaZE?editors=1010

\n

我发现了一个 Vuetify github 错误：\n https://github.com/vuetifyjs/vuetify/issues/2377

\n

Vuetify v-selectCodepen 示例：\n https://codepen.io/zmrqodfu/pen/abZeVOP?editors=101

\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n

Answer 1

您可以使用该menu-props道具：

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

或者，您可以通过以下方式手动定位菜单：

CSS

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

您更新的Codepen