javascript - 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
    }
  }
}

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