Vuetify组合框-单击图标打开下拉列表

Question

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

我是Vuetify的新手，从目前的情况来看，组合框是最好的组件。

我希望只有单击下拉图标才能打开下拉列表。此时，当您单击文本输入字段时，下拉列表将打开。从文档来看，道具: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。

代码笔