vue3+lodash/debounce封装组件：搜索框输入防抖（等待用户连续输入停止n秒后自动搜索）

Lodash官网：https://lodash.com/
Lodash主页：https://github.com/lodash/lodash#installation

1、安装 lodash 或 lodash-es

# 安装完整 Lodash 工具库npmi--savelodash# 或者仅安装 ES 模块版本‌，体积更小、性能更好（推荐）npmi lodash-es

2、安装配置 element-plus（按需）

请参考我之前的文章：vue3+elementplus+sass/scss安装配置教程：使用svg图标、引入外部字体、定义变量模块、修改组件样式、一键切换主题等

3、封装组件

<!-- src/components/DebounceSearch.vue --><template><el-inputv-model.trim="value"placeholder="请输入关键词进行搜索"clearable:disabled="disabled"@input="handleInput(value)"@clear="onSearch('')"class="debounce_search"><template#prefix><el-iconclass="el-input__icon"><search/></el-icon></template></el-input></template><script>importdebouncefrom'lodash-es/debounce'//引入防抖函数exportdefault{props:{disabled:Boolean,//是否禁用},data(){return{value:'',handleInput:null,//输入时触发input事件执行防抖函数}},created(){//等待用户连续输入，当输入停止2秒后执行一次搜索this.handleInput=debounce((value)=>{this.onSearch(value)},2000)},methods:{//自定义搜索逻辑onSearch(value){//例如：触发search事件并传递参数valuethis.$emit('search',value)},},}</script><stylelang="scss">.debounce_search{width:250px;margin-right:15px;}</style>

4、全局注册组件（也可在应用时按需引入）

/* src/main.js */import{createApp}from"vue";importAppfrom"./App.vue";//导入组件importDebounceSearchfrom"./components/DebounceSearch.vue";//import MoreComponent from "./components/MoreComponent.vue";constapp=createApp(App);//注册组件app.component("DebounceSearch",DebounceSearch);//app.component("MoreComponent", MoreComponent)app.mount('#app')

5、应用组件

<!-- Example.vue --><template><div><!-- 全局注册后可直接使用 <DebounceSearch /> -->姓名：<DebounceSearch:disabled="loading"@search="getData"/></div></template><script>//或按需引入组件（仅此页面生效）importDebounceSearchfrom'@/components/DebounceSearch.vue'exportdefault{components:{DebounceSearch,//注册组件（仅此页面生效）},data(){return{loading:false,}},methods:{//触发search事件时执行函数getData(value){this.loading=trueconstparams={searchText:value,currentPage:1,}//……},},}</script>