vue 实现边输入边搜索功能
搜索分两种情况,第一:输入完了点击搜索按钮—>比较麻烦。第二:边搜索边查询—>性能不好。所以,使用截留函数来实现,当用户每次点击键盘之间超过一定时间段后就发送请求,否则不请求。<template><Input v-model.trim="searchValue&q
·
搜索分两种情况,第一:输入完了点击搜索按钮—>比较麻烦。
第二:边搜索边查询—>性能不好。
所以,使用截留函数来实现,当用户每次点击键盘之间超过一定时间段后就发送请求,否则不请求。
<template>
<Input v-model.trim="searchValue" type="text" class="search" style="width:80%;margin-left:10%">
<Button slot="append" icon="ios-search"></Button>
</Input>
</template>
<script>
// 节流函数
const delay = (function() {
let timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
export default {
name: 'search',
data () {
return {
searchValue:'',
}
},
Method:{
//模糊查询被评价人
async fetchData(val) {
//写上你的搜索方法体
},
},
watch: {
//用来监听页面变量的改变
//监听搜索,300ms执行一次fetchData方法(去搜索)
searchValue() {
delay(() => {
this.fetchData();
}, 300);
},
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)