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

    ref="autocomplete" 

    label="Autocomplete"

    :items="components"

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

    persistent-hint

></v-autocomplete>

export default {

  mounted () {

    let autocompleteInput = this.$refs.autocomplete.$refs.input

    autocompleteInput.addEventListener('focus', this.onFocus, true)

  },

  methods: {

    onFocus (e) {

      this.$refs.autocomplete.isMenuActive = true  // open item list

    }

  }

}

pen - https://codepen.io/kdydesign/pen/rNNadXN?editors=1111

Answer 2

您可以简单地使用 Vue.js 的focus()和activateMenu()，而不是挖掘底层的 DOM

<template>

  <v-row>

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

      <v-text-field label="Text Field" @keydown.tab="focus" />

    </v-col>

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

      <v-autocomplete

        ref="aut"

        label="Autocomplete"

        :items="components"

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

        persistent-hint

      ></v-autocomplete>

    </v-col>

  </v-row>

</template>

<script>

export default {

  layout: "center-six",

  data() {

    return {

      components: ["A", "B", "C", "D"],

    };

  },

  methods: {

    focus() {

      this.$refs["aut"].focus();

      this.$refs["aut"].activateMenu();

    },

  },

};

</script>

我还创建了一个简单的 codePen VueJs Menu Activator