搜索分两种情况,第一:输入完了点击搜索按钮—>比较麻烦。
第二:边搜索边查询—>性能不好。
所以,使用截留函数来实现,当用户每次点击键盘之间超过一定时间段后就发送请求,否则不请求。

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

Logo

前往低代码交流专区

更多推荐