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

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>

我还创建了一个简单的代码笔 VueJs Menu Activator

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

2 个答案: