Vuetify Combobox - 单击图标打开下拉菜单

Question

我正在尝试在下拉列表中创建一个包含以前搜索历史记录的搜索输入字段，例如 Intellij 编辑器中的搜索字段。

我是 Vuetify 的新手，从目前的情况来看，Combobox 似乎是最适合使用的组件。

我希望只有在您点击下拉图标时才会打开下拉菜单。目前，当您单击文本输入字段时，下拉菜单会打开。从文档看起来像 prop :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 prop 仅在单击图标时更改该值。

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

因此，对于任何其他情况，当您想要打开或关闭菜单时，只需更改该自定义值，即 autoselectMenu。

codepen