<!-- 搜索组件,输入框添加input事件 -->
<van-search
placeholder="请输入搜索关键词"
background="#007BFF"
shape="round"
@input="inputFn"
v-model="kw"
/>
data(){
return{
kw: '', // 搜索关键字
suggestList: [],
timer: ''
}
}
// 输入框防抖
inputFn () {
clearTimeout(this.timer)
this.timer = setTimeout(async () => {
if (this.kw.length > 0) {
const res = await suggestListAPI(this.kw)
if (res.data.data.options[0] === null) {
this.suggestList = []
} else {
this.suggestList = res.data.data.options
// console.log(res)
}
} else {
this.suggestList = []
}
}, 300)
},
思路:监听一个input事件,先清除一下定时器,当输入的时候,定时器开启,在规定时间内输入文字又一次触发input事件,又将会清除一次定时器。(中途是在项目中使用的,调用接口,将输入的内容存到一个数组里)