input输入内容时延时请求

为了解决当用户输入内容时连续发起网络请求,使用户输入完毕后再发起请求。

函数防抖

<el-input 
  v-model="selectName"
  placeholder="请输入姓名查找"
  size="mini"
  class="select-styl"
></el-input>

在用户输入内容的时候,将输入内容selectName进行双向绑定到配置中

data () {
  return {
    selectName: null
  }
},

在watch中对selectName进行监听,当值发生改变的时候,并不是直接发起网络请求,而是设置一个延时器,当值发生改变时,延迟0.5秒再发起网络请求,这样就能实现输入框防抖功能,使用户体验更好。

watch: {
  selectName (curVal, oldVal) {
  // 实现input连续输入,只发一次请求
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.handleChangeName(curVal)
    }, 500)
  }
},
handleChangeName (value) {
  if (value === '') {
    return false;
  }
  console.log(value)
}

————————————————
原文链接:https://blog.csdn.net/tangkthh/article/details/92679882

Logo

前往低代码交流专区

更多推荐