vue 输入框防抖

1.在search组件中关联kw变量

<van-search v-fofo v-model="kw" placeholder="请输入搜索关键词" background="#007BFF" shape="round" />

2.在data中声明变量timer, 保存延迟定时器

data () {
return {
kw: '', // 搜索关键字
timer: null // 防抖, 用的定时器
}
}

3.监听输入框的@inupt事件, 在事件处理函数中使用防抖操作

<van-search v-fofo v-model="kw" placeholder="请输入搜索关键词" background="#007BFF" shape="round" @input="inputFn"/>

<script>
methods: {
inputFn () {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
if (this.kw.length === 0) return // 防止空内容触发下面逻辑
console.log(this.kw)
}, 500)
}
}
</script>