javascript - 如何让 v-autocomplete/v-select 始终显示下拉列表？

Question

我正在使用 v-autocomplete，它是 extended from v-select .

我有一种情况，我想将这个选择包装在一个 v-menu 中。

如果您尝试使用 v-btn 激活器将 v-select 包装在 v-menu 中，您会期望什么是先渲染一个按钮，当你点击按钮时，它会显示自动完成。

请参阅此代码笔了解我的意思:https://codepen.io/sntshk/pen/KKmjMPX?editors=1010

上述实现的问题是，当您单击按钮时，您最初看到的是一个压扁的下拉项，看起来非常糟糕。然后，当您通过单击专注于 v-select 时，您会看到完整的下拉列表。

我在这里试图实现的是在单击按钮时使 v-select 默认聚焦。当我单击按钮时，这将完全呈现列表项。

所以我的问题是，我该怎么做才能使 v-select 默认聚焦？

Answer 1

您可以通过在 v-autocomplete 上设置 autofocus 属性来实现此效果，然后监听此元素上的焦点事件并执行以下操作:

@focus="$event.target.click"

这样当菜单打开时，选择字段获得焦点并且焦点事件代码使下拉菜单打开。

查看下面的演示:

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    flowers: ['foo', 'bar', 'baz', 'lorem', 'ipsum', 'something', 'else', 'to', 'make', 'itemlist', 'long']
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-menu offset-y :close-on-content-click="false">
          <template v-slot:activator="{ on, attrs }">
              <v-btn v-bind="attrs" v-on="on">foobar</v-btn>
            </template>
          <v-autocomplete autofocus :items="flowers" multiple label="Select an item" @focus="$event.target.click()"></v-autocomplete>
        </v-menu>
      </v-container>
    </v-main>
  </v-app>
</div>