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改写

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值