vue3提交按钮限制重复点击

news2024/11/24 11:43:58

下载lodash

npm install lodash

引入并使用

<template>
    <div @click="submit()">提交</div>
</template>

<script setup>
    import { debounce } from 'lodash';
    const submit = debounce(() => {
        //业务代码
    },2000,{leading: true,trailing: false})
</script>

lodash中引入debounce函数,leading和trailing是配置布尔值。leading为true的时候是先触发业务代码,2000ms内不再触发,默认为false。trailing为true是默认值,代表点击按钮2000ms后再出发业务代码

debounce防抖:适合用于提交表单、搜索、输入框输入、窗口调整事件

案例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2135425.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ETL数据集成丨建设BI的关键前提是ETL数据集成?

背景 很多企业都购买了商业智能&#xff08;BI&#xff09;来加速数字化转型&#xff0c;但是发现仅仅依赖BI效果往往不太好。虽然通过BI&#xff0c;企业能够快速分析和可视化数据&#xff0c;然而&#xff0c;BI并不是一个万能工具&#xff0c;它虽然能帮助企业解读数据&…

rancker 图形化界面

rancker 图形化界面 图形化界面进行k8s集群的管理 rancher自带监控————普罗米修斯 #在master和两个node上都操作 [rootmaster01 opt]# rz -E rz waiting to receive. [rootmaster01 opt]# docker load -i rancher.tar ​ #在master上操作 [rootmaster01 opt]# docker pul…

90v转5v500MA内置mos芯片方案

在设计一个90V转5V500mA的DC/DC转换器方案时&#xff0c;可以考虑使用AH7550这款150KHz固定频率PWM降压&#xff08;降压&#xff09;DC/DC转换器。AH7550能够以高效率、低纹波和出色的线路和负载调节驱动0.4A负载&#xff0c;且需要最少数量的外部组件&#xff0c;使用简单&am…

【物联网技术大作业】设计一个智能家居的应用场景

前言&#xff1a; 本人的物联网技术的期末大作业&#xff0c;希望对你有帮助。 目录 大作业设计题 &#xff08;1&#xff09;智能家居的概述。 &#xff08;2&#xff09;介绍智能家居应用。要求至少5个方面的应用&#xff0c;包括每个应用所采用的设备&#xff0c;性能&am…

CAPL_构建基于UDS的刷写学习—01 Hex文件的解析

前言&#xff1a; 打算写一个系列&#xff1a;CAPL_构建基于UDS的刷写学习&#xff0c;大致写一下写作的思路 1&#xff1a;本文是第1篇首先讲解基础。首先搞清楚&#xff0c;各种不同文件&#xff08;常见的S19,hex,bin,以及汽车行业主机厂自己的各种文件CBF(奇瑞特有),VBF&…

SpringCloud Alibaba之Nacos服务注册和配置中心

&#xff08;学习笔记&#xff09;nacos-server版本&#xff1a;2.2.3 总体介绍&#xff1a; 1、Nacos介绍 官网&#xff1a;Nacos官网| Nacos 配置中心 | Nacos 下载| Nacos 官方社区 | Nacos 官网 Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service的首字…

8路模拟量采集模块,4~20mA 0~10V电流电压高速采集——DAM-3054P

阿尔泰科技 DAM-3054P为8路差分模拟量采集模块&#xff0c;高速采集&#xff0c;每通道采集速率为500sps&#xff0c;16位AD&#xff0c;支持RS485通讯接口&#xff0c;带有标准ModbusRTU协议。配备良好的人机交互界面&#xff0c;使用方便&#xff0c;性能稳定。 指标参数&…

基于图像的端到端方案实现小车在模拟城市场景中的自主导航

基于图像的端到端方案实现小车在模拟城市场景中的自主导航 FSD&#xff08;Full Self-Driving&#xff09;是特斯拉公司推出的一种自动驾驶技术&#xff0c;旨在实现完全自主的驾驶体验。FSD系统依靠大量的数据和高级的机器学习算法&#xff0c;结合车载传感器&#xff08;如摄…

docker--刚开始学不知道如何操作拉取,或拉取失败(cmd)

报 unauthorized: incorrect username or password.&#xff08;未授权&#xff09; 进行授权 在docker desktop注册账号登录好docker desktop 在cmd中进行docker登录&#xff0c;输入账号密码&#xff0c;提示Login Succeeded&#xff0c;即登录成功 docker login -u xxx(x…

yjs04——matplotlib的使用(多个坐标图)

1.多个坐标图与一个图的折线对比 1.引入包&#xff1b;字体&#xff08;同&#xff09; import matplotlib.pyplot as plt import random plt.rcParams[font.family] [SimHei] plt.rcParams[axes.unicode_minus] False 2.创建幕布 2.1建立图层幕布 一个图&#xff1a;plt.fig…

Artec Leo协助定制维修管道,让石油和天然气炼油厂不停产

以下文章来源于Artec3D埃太科三维 &#xff0c;作者小埃 挑战 在高温、狭窄的炼油厂中&#xff0c;准确测量结构复杂的受损管道和设备&#xff0c;以便设计、制造、安装定制维修解决方案&#xff0c;从而尽快完成修复。 解决方案 Artec Leo, Artec Studio, Geomagic Design X…

关于Vue2里 v-for和v-if一起用的时候会出现的问题

关于Vue2里 v-for和v-if一起用的时候会出现的问题 &#x1f389;&#x1f389;&#x1f389;欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!&…

roboguide将tp程序转化为LS文本格式的方法

不同的软件版本可能操作不同&#xff0c;但是仍然可以参考文章中的办法。 我使用的版本如图所示&#xff1a; 1.首先&#xff0c;打开任意一个工程&#xff0c;如果没有&#xff0c;可以打开自带的示例。 如图&#xff0c;我打开了自带的示例&#xff0c;在帮助文档中可以找到…

ubuntu中QT+opencv在QLable上显示摄像头

ubuntu中QTopencv在QLable上显示摄像头 饭前的一篇文章吧&#xff0c;写完吃饭走 图像在机器视觉中的重要性是不可忽视的。机器视觉是指计算机利用图像处理技术进行图像识别、分析和理解的科学与技术领域。图像是机器视觉的输入数据&#xff0c;通过分析和处理图像&#xff0…

【鸿蒙】HarmonyOS NEXT星河入门到实战7-ArkTS语法进阶

目录 1、Class类 1.1 Class类 实例属性 1.2 Class类 构造函数 1.3 Class类 定义方法 1.4 静态属性 和 静态方法 1.5 继承 extends 和 super 关键字 1.6 instanceof 检测是否实例 1.7.修饰符(readonly、private、protected 、public) 1.7.1 readonly 1.7.2 Private …

Frida 脚本抓取 HttpURLConnection 请求和响应

引入 Java 类&#xff1a; 引入 okhttp3.OkHttpClient、okhttp3.OkHttpClient$Builder、okhttp3.Interceptor、okhttp3.ResponseBody 等类。 创建自定义拦截器&#xff1a; 通过 Java.registerClass 创建自定义拦截器 MyInterceptor。拦截器中重写 intercept 方法&#xff0…

凸优化学习(2)——梯度类方法求解(gradient descent)

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…

使用ChatGPT撰写科研论文全攻略指南,附高效学术提示词指令

借助ChatGPT撰写科研论文,会让本该痛苦煎熬的写作过程变得有趣和高效。我会通过,了解 ChatGPT 如何改变撰写研究论文的传统方法,提供从构建大纲到制作复杂论点的创新解决方案。 无论您是经验丰富的研究人员还是新手作家,都可以了解 ChatGPT 的功能如何增强您的研究过程,确…

解决 VMware 无法上网问题

引言&#xff1a;平时学习某些技术&#xff0c;需要搭建集群环境&#xff0c;毕竟学习不可能真去购买那么多服务器来搭建集群。此时通过 VMware 安装多个系统来搭建集群是个不错的选择&#xff0c;而安装多个虚拟机容易出现网络问题&#xff0c;导致无法上网&#xff0c;这篇文…

重磅新品 HP1016:低功耗单相 CrM PFC 控制芯片正式发布

在输出功率 100-300W 的应用场景中&#xff0c;涵盖了消费电子、家用电器、LED 照明、通信设备等领域。传统的反激式架构逐渐难以应对现代大功率应用所需的高开关频率、高功率密度以及高效率标准&#xff0c;需要进行功率因数校正&#xff08;PFC&#xff09;。针对此类功率等级…