首页/新闻资讯/正文详情

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

发布时间:2026/9/25 14:01:48 来源:云帆数科 栏目:资讯中心
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

相关推荐

WPScan 动态查找器实战:如何借助 CHANGELOG.md 精准识别 WordPress 插件版本
WPScan 动态查找器实战:如何借助 CHANGELOG.md 精准识别 WordPress 插件版本

网络安全漏洞扫描渗透测试应用安全CLI 【免费下载链接】wpscan WPScan WordPress security scanner. Written for security professionals and blog maintainers to test the security of their WordPress websites. Contact us via contactwpscan.com 项目地址: ht… · 2026/9/25 14:01:42

轻量级CRM设计:让沟通记录自然沉淀为客户时间线
轻量级CRM设计:让沟通记录自然沉淀为客户时间线

1. 项目定位与整体设计思路1.1 为什么叫Deskcomm:把“桌面沟通”变成客户管理的锚点DeskcommCRM这个项目名,拆开来看就很有意思。Desk是桌面,comm是communication的缩写,合在一起就是“桌面沟通”。做CRM的人都知道,市… · 2026/9/25 14:01:29

Claude Opus 4.8 配 TaoToken:multi-agent harness 的 config.toml 骨架与 Effort Control 验证
Claude Opus 4.8 配 TaoToken:multi-agent harness 的 config.toml 骨架与 Effort Control 验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 14:01:29

BentoML 部署打包指南:从定义运行时环境到构建 Bento 与容器化发布
BentoML 部署打包指南:从定义运行时环境到构建 Bento 与容器化发布

模型推理服务人工智能后端大模型MLOpsLLMOps 【免费下载链接】BentoML The easiest way to serve AI apps and models - Build Model Inference APIs, Job queues, LLM apps, Multi-model pipelines, and more! 项目地址: https://gitcode.com/gh_mirrors/be/BentoM… · 2026/9/25 14:36:17

Wireless_Toolkit:用浏览器操控 Kali 无线安全测试工具(Wi-Fi + 蓝牙)
Wireless_Toolkit:用浏览器操控 Kali 无线安全测试工具(Wi-Fi + 蓝牙)

目录1. 整体架构2. 硬件与任务槽3. 安全约束3.1 绝不碰 wlan03.2 提权白名单3.3 子进程安全4. 硬件检测页5. Wi-Fi 功能5.1 扫描5.2 抓握手5.3 抓 PMKID最近把平时做无线安全测试用的那堆命令行工具,整合成了一个浏览器可操控的控制台,叫 Wireless_Toolk… · 2026/9/25 14:36:04

Atlas 300V 24G推理卡实战:从ONNX到OM跑通YOLOv5/YOLOv8
Atlas 300V 24G推理卡实战:从ONNX到OM跑通YOLOv5/YOLOv8

先说个最近的真实场景。手里有一个YOLO检测项目要上线,常规思路是直接买GPU,结果一看价格和功耗,人直接麻了。后来同事问了一句:“Atlas 300V 24G那张卡能不能跑YOLO?”我查了一圈资料、拿卡实测了几周,发现… · 2026/9/25 14:35:40

AI与机器学习如何辅助硬件设计:从器件选型到PCB布局的实战指南
AI与机器学习如何辅助硬件设计:从器件选型到PCB布局的实战指南

1. 硬件设计为什么需要AI和机器学习介入干了十几年硬件设计,从最早的51单片机最小系统,到后来DDR4的布线、ESP32-C6-WROOM-1的射频接口设计,我最大的感受就是:硬件设计本质上是一个“在约束条件里找最优解”的过程,而人… · 2026/9/25 14:35:34

Themida/WinLicense 1.8-2.x 脱壳与调试辅助:从识别版本到拿到原始 OEP
Themida/WinLicense 1.8-2.x 脱壳与调试辅助:从识别版本到拿到原始 OEP

简介:这是一套面向逆向分析人员的Themida WinLicense脱壳与调试辅助工具集,覆盖1.8.X至2.X版本保护程序,适合具备一定Windows逆向基础、需要开展加壳识别、特征提取与脱壳流程验证的从业者。包内共292个文件,约2.23MB,… · 2026/9/25 14:35:27

工业Agent与实时控制:概念辨析、落地层次与工程实践
工业Agent与实时控制:概念辨析、落地层次与工程实践

1. 先搞清楚“工业Agent”和“实时控制”到底在说什么1.1 两个被混为一谈的概念“工业Agent”这个词最近两年被炒得很热,但很多人把它和“实时控制”绑在一起讲,其实这俩压根不是一回事。我先把定义掰开揉碎说清楚。工业Agent,通常指部署在工… · 2026/9/25 14:35:27

数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)
数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战
创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX
MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码