vue 实现边输入边搜索功能

2024年5月27日 123次阅读 来源: 竹蜻蜓dd

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

<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>
    原文作者：竹蜻蜓dd
    原文地址: https://blog.csdn.net/wzcyamadie/article/details/84932502
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞