Bootstrap

ElementUi el-autocomplete 使用clearable属性,点击清除重新输入提示不显示

点击清除按钮后,重新输入querySearchAsync有执行,也有返回值,但提示不显示。光标移到别处点击再回来有时又正常。

文档中,clearable 是input的属性, Autocomplete没有,clear事件是否影响cb()方法执行?(没找到cb()方法的文档以及源码)

处理方式:

通过反复测试对比发现,点击清除重新输入时input没有失去焦点,这个问题会导致再次输入时没有聚焦,所以出现不显示的问题。通过查看源码发现点击输入时候会执行以下方法,主要原因是把 this.activated的值设置为false了,然后回调成功的时候没有设置 this.activated = true,所以就导致了不显示的问题。源码如下:

     handleFocus(event) {
            this.activated = true;
        this.$emit('focus', event);
        if (this.triggerOnFocus) {
          this.debouncedGetData(this.value);
        }
      },
      handleBlur(event) {
        this.$emit('blur', event);
      },
    // 清除的方法
      handleClear() {
        this.activated = false;
        this.$emit('clear');
      },

临时的解决办法是设置一个ref='autocomplete',然后清除的时候再执行this.$refs.elautocomplete.handleFocus()方法,解决的核心思路就是想办法把this.activated的值设置为true,如以下代码:

本地定义了一个autocompleteFocusFlag来判断是不是已经获取到了焦点

<el-autocomplete ref="autocomplete" v-model="publishForm.tutorName" @focus="autocompleteFlag=true" @blur="autocompleteFlag=false" :fetch-suggestions="getTutorName" @clear="searchHandle" class="el_input_autocomplete" clearable />
// 搜索
    searchHandle() {
        if(this.autocompleteFocusFlag) this.$refs.autocomplete.activated = true;
        this.getTabList()
    },

参考的https://segmentfault.com/q/1010000020709879改写

;