yuche / vue-strap

Bootstrap components built with Vue.js
http://yuche.github.io/vue-strap/
MIT License
4.71k stars 929 forks source link

Typeahead: '中文输入' 时下拉菜单不能及时出现 #349

Open joehecn opened 8 years ago

joehecn commented 8 years ago

vue-strap 版本号:v1.1.23

问题:当输入中文时,必须按下下一个字符时下拉菜单才会更新。

我临时的解决办法是加一个延时。 将源代码片段: https://github.com/yuche/vue-strap/blob/aeafe390e9300612c47f94dfc0dea7ee34ca6363/src/Typeahead.vue

   ...
    update () {
      if (!this.value) {
        this.reset()
        return false
      }
      if (this.data) {
        this.items = this.primitiveData
        this.showDropdown = this.items.length > 0
      }
      if (this.async) {
        getJSON(this.async + this.value).then(data => {
          this.items = (this.key ? data[this.key] : data).slice(0, this.limit)
          this.showDropdown = this.items.length > 0
        })
      }
    },
   ...

加一个 setTimeout 延时,改为:

   ...
   update () {
      let _sef = this
      setTimeout(function () {
        if (!_sef.value) {
          _sef.reset()
          return false
        }
        if (_sef.data) {
          _sef.items = _sef.primitiveData
          _sef.showDropdown = _sef.items.length > 0
        }
      }, 100)
   ...

这样好像正常了。

请教大神们,有更好的方案吗?

evanslify commented 7 years ago

你的問題我也遇過,經大神指點後,發現使用 IME 時,並不一定能夠使用 input 來捕捉輸入事件。 https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent https://github.com/songhlc/blog/issues/23

解決方法是另外新增 @compositionend="update"

evanslify commented 7 years ago

Please see PR #459.