Question

我正在尝试创建一个具有下拉菜单中先前搜索历史的搜索输入字段，例如Intellij编辑器中的搜索字段。

我是Vuetify的新手，到目前为止，看来Combobox是最适合使用的组件。

我希望仅在单击下拉图标时打开下拉菜单。当您在文本输入字段中单击时，下拉列表将打开。从文档中看来，道具:menu-props="{openOnClick: false}"可能是我需要的，但是它似乎不起作用。

谁能给我正确的方向指示？

https://codepen.io/damianhelme/pen/zMXJvb

<v-combobox
   v-model="search"
   :items="searchHistory"
   label="Search"
   :menu-props="{openOnClick: false}"
></v-combobox>

new Vue({
  el: '#app',
  data () {
    return {
      search: '',
      searchHistory: [
        'Apple',
        'Banana',
        'Pear'
      ]
    }
  }
})

谢谢。

Answer 1

编辑：
更新了带有自定义append插槽的笔以处理图标状态：
https://codepen.io/anon/pen/KrjzRL

如果要仅在单击图标时打开（和关闭）组合框，请尝试以下技巧：

<v-combobox
    :menu-props="{value: autoselectMenu}"
    @click:append="toggle"
></v-combobox>

将自定义value传递给菜单-指示是否应打开/关闭菜单。
然后仅使用:append-icon-cb属性在图标单击时更改该值。

data () {
  return {
    autoselectMenu: false,
// ...
methods: {
  toggle() {
    this.autoselectMenu = !this.autoselectMenu
  }
// ...

因此，在任何其他情况下要打开或关闭菜单时，只需更改该自定义值即可，即autoselectMenu。

codepen

Vuetify Combobox-单击图标打开下拉列表

1 个答案: