时间戳

首页 > 解决方案 > 如何使 v-autocomplete/v-select 始终显示下拉菜单？

javascript - 如何使 v-autocomplete/v-select 始终显示下拉菜单？

问题描述

我正在使用从 v-select 扩展而来的v-autocompletea 。

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

如果您尝试使用激活器将 a 包装v-select在 a 中，您希望首先呈现一个按钮，当您单击该按钮时，它会显示自动完成。v-menuv-btn

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

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

我在这里想要实现的是，当我单击按钮时，默认情况下使 v-select 成为焦点。当我单击按钮时，这将完全呈现列表项。

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

标签： javascriptvue.jsvue-componentdom-eventsvuetify.js

解决方案

你可以通过设置autofocusprop来达到这个效果v-autocomplete，然后在这个元素上监听 focus 事件并执行以下操作：

@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>

推荐阅读