Lodash官网https://lodash.com/Lodash主页https://github.com/lodash/lodash#installation1、安装 lodash 或 lodash-es# 安装完整 Lodash 工具库npmi--savelodash# 或者仅安装 ES 模块版本体积更小、性能更好推荐npmi lodash-es2、安装配置 element-plus按需请参考我之前的文章vue3elementplussass/scss安装配置教程使用svg图标、引入外部字体、定义变量模块、修改组件样式、一键切换主题等3、封装组件!-- src/components/DebounceSearch.vue --templateel-inputv-model.trimvalueplaceholder请输入关键词进行搜索clearable:disableddisabledinputhandleInput(value)clearonSearch()classdebounce_searchtemplate#prefixel-iconclassel-input__iconsearch//el-icon/template/el-input/templatescriptimportdebouncefromlodash-es/debounce//引入防抖函数exportdefault{props:{disabled:Boolean,//是否禁用},data(){return{value:,handleInput:null,//输入时触发input事件执行防抖函数}},created(){//等待用户连续输入当输入停止2秒后执行一次搜索this.handleInputdebounce((value){this.onSearch(value)},2000)},methods:{//自定义搜索逻辑onSearch(value){//例如触发search事件并传递参数valuethis.$emit(search,value)},},}/scriptstylelangscss.debounce_search{width:250px;margin-right:15px;}/style4、全局注册组件也可在应用时按需引入/* src/main.js */import{createApp}fromvue;importAppfrom./App.vue;//导入组件importDebounceSearchfrom./components/DebounceSearch.vue;//import MoreComponent from ./components/MoreComponent.vue;constappcreateApp(App);//注册组件app.component(DebounceSearch,DebounceSearch);//app.component(MoreComponent, MoreComponent)app.mount(#app)5、应用组件!-- Example.vue --templatediv!-- 全局注册后可直接使用 DebounceSearch / --姓名DebounceSearch:disabledloadingsearchgetData//div/templatescript//或按需引入组件仅此页面生效importDebounceSearchfrom/components/DebounceSearch.vueexportdefault{components:{DebounceSearch,//注册组件仅此页面生效},data(){return{loading:false,}},methods:{//触发search事件时执行函数getData(value){this.loadingtrueconstparams{searchText:value,currentPage:1,}//……},},}/script
vue3+lodash/debounce封装组件：搜索框输入防抖（等待用户连续输入停止n秒后自动搜索）
Lodash官网https://lodash.com/Lodash主页https://github.com/lodash/lodash#installation1、安装 lodash 或 lodash-es# 安装完整 Lodash 工具库npmi--savelodash# 或者仅安装 ES 模块版本体积更小、性能更好推荐npmi lodash-es2、安装配置 element-plus按需请参考我之前的文章vue3elementplussass/scss安装配置教程使用svg图标、引入外部字体、定义变量模块、修改组件样式、一键切换主题等3、封装组件!-- src/components/DebounceSearch.vue --templateel-inputv-model.trimvalueplaceholder请输入关键词进行搜索clearable:disableddisabledinputhandleInput(value)clearonSearch()classdebounce_searchtemplate#prefixel-iconclassel-input__iconsearch//el-icon/template/el-input/templatescriptimportdebouncefromlodash-es/debounce//引入防抖函数exportdefault{props:{disabled:Boolean,//是否禁用},data(){return{value:,handleInput:null,//输入时触发input事件执行防抖函数}},created(){//等待用户连续输入当输入停止2秒后执行一次搜索this.handleInputdebounce((value){this.onSearch(value)},2000)},methods:{//自定义搜索逻辑onSearch(value){//例如触发search事件并传递参数valuethis.$emit(search,value)},},}/scriptstylelangscss.debounce_search{width:250px;margin-right:15px;}/style4、全局注册组件也可在应用时按需引入/* src/main.js */import{createApp}fromvue;importAppfrom./App.vue;//导入组件importDebounceSearchfrom./components/DebounceSearch.vue;//import MoreComponent from ./components/MoreComponent.vue;constappcreateApp(App);//注册组件app.component(DebounceSearch,DebounceSearch);//app.component(MoreComponent, MoreComponent)app.mount(#app)5、应用组件!-- Example.vue --templatediv!-- 全局注册后可直接使用 DebounceSearch / --姓名DebounceSearch:disabledloadingsearchgetData//div/templatescript//或按需引入组件仅此页面生效importDebounceSearchfrom/components/DebounceSearch.vueexportdefault{components:{DebounceSearch,//注册组件仅此页面生效},data(){return{loading:false,}},methods:{//触发search事件时执行函数getData(value){this.loadingtrueconstparams{searchText:value,currentPage:1,}//……},},}/script
