Vuetify 在焦点上打开选择/自动完成/组合框菜单

Question

我有一个 Vuetifyjs 自动完成功能。我想在用户使用先前输入的 Tab 键关注它时打开它的菜单。下面是示例代码

<div id="app">

<v-app>

    <v-container >

    <v-row >

        <v-col cols="12" md="4">

        <v-text-field label="Text Field"/>

        </v-col>

        <v-col cols="12" md="6">

        <v-autocomplete

            label="Autocomplete"

            :items="components"

            hint="need to open menu on focus, just like click" persistent-hint

        ></v-autocomplete>

        </v-col>

    </v-row>

    </v-container>

</v-app>

</div>

<script>

new Vue({

  el: "#app",

  vuetify: new Vuetify(),

  data: {

        components: [

          'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',

        ],

  },

  methods: {

  }

})

</script>

我还为此创建了一支笔https://codepen.io/salalaslam/pen/YzzPajN

Answer 1

因为 vuetify 没有你想要的选项，你必须直接控制它。一个input标签里面存在autocomplete组件。直接在此input标签上指定焦点事件。尝试这个。// template<v-autocomplete&nbsp; &nbsp; ref="autocomplete"&nbsp;&nbsp; &nbsp; label="Autocomplete"&nbsp; &nbsp; :items="components"&nbsp; &nbsp; hint="need to open menu on focus, just like click"&nbsp;&nbsp; &nbsp; persistent-hint></v-autocomplete>export default {&nbsp; mounted () {&nbsp; &nbsp; let autocompleteInput = this.$refs.autocomplete.$refs.input&nbsp; &nbsp; autocompleteInput.addEventListener('focus', this.onFocus, true)&nbsp; },&nbsp; methods: {&nbsp; &nbsp; onFocus (e) {&nbsp; &nbsp; &nbsp; this.$refs.autocomplete.isMenuActive = true&nbsp; // open item list&nbsp; &nbsp; }&nbsp; }}pen - https://codepen.io/kdydesign/pen/rNNadXN?editors=1111

Answer 2

您可以简单地使用 Vue.js 的focus()和activateMenu()，而不是挖掘底层的 DOM<template>&nbsp; <v-row>&nbsp; &nbsp; <v-col cols="12" md="4">&nbsp; &nbsp; &nbsp; <v-text-field label="Text Field" @keydown.tab="focus" />&nbsp; &nbsp; </v-col>&nbsp; &nbsp; <v-col cols="12" md="6">&nbsp; &nbsp; &nbsp; <v-autocomplete&nbsp; &nbsp; &nbsp; &nbsp; ref="aut"&nbsp; &nbsp; &nbsp; &nbsp; label="Autocomplete"&nbsp; &nbsp; &nbsp; &nbsp; :items="components"&nbsp; &nbsp; &nbsp; &nbsp; hint="need to open menu on focus, just like click"&nbsp; &nbsp; &nbsp; &nbsp; persistent-hint&nbsp; &nbsp; &nbsp; ></v-autocomplete>&nbsp; &nbsp; </v-col>&nbsp; </v-row></template><script>export default {&nbsp; layout: "center-six",&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; components: ["A", "B", "C", "D"],&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; focus() {&nbsp; &nbsp; &nbsp; this.$refs["aut"].focus();&nbsp; &nbsp; &nbsp; this.$refs["aut"].activateMenu();&nbsp; &nbsp; },&nbsp; },};</script>我还创建了一个简单的 codePen&nbsp;VueJs Menu Activator