Quasar QSelect 弹出窗口和输入文本持续点击

Question

我正在尝试设置一个由用户输入驱动的 QSelect 以实现“自动完成”行为。官方文档中有一些示例，它们使用了@filter 回调。

我目前有两个问题：

每当我在输入字段外单击时，输入文本就会丢失，弹出窗口也会消失。
如果我点击输入，当前文本会保留，但弹出窗口会隐藏，直到我再次点击它。

对于后一个问题，一种解决方法是在单击时强制显示弹出窗口：

<q-select
  ref="input"
  ...
  @click.native.prevent="onClick"
>
...
onClick(){
  if( this.searchFilter.length > 0){
    this.$refs.input.showPopup()
  }
}

不过，不便的是弹窗还是会消失一小会儿再出现。我也尝试过使用 @click.native.stop 而不是 @click.native.prevent 无济于事。

至于问题 1，我什至还没有找到解决方法。

Here 是一个相关问题，尽管在他的案例中弹出窗口消失是一种想要的行为。

我设置了一个基本的Pen来说明问题。尝试在相同高度点击输入或输入外。

Answer 1

诀窍是使用 @click.capture.native 然后通过 event.stopImmediatePropagation() 有条件地停止回调函数内部的传播看到它工作 here

Quasar QSelect 弹出窗口和输入文本持续点击

Quasar QSelect popup and input text persistent on click

vue.js

quasar-framework

quasar