uniapp点击按钮,防止按钮多次点击多次触发事件【防抖操作】

图片、

请添加图片描述

一、在根目录下新建common文件并创建common.js文件,输入下面代码

 // 防止处理多次点击function noMultipleClicks(methods, info) {// methods是需要点击后需要执行的函数, info是点击需要传的参数let that = this;if (that.noClick) {// 第一次点击that.noClick= false;if(info && info !== '') {// info是执行函数需要传的参数methods(info);} else {methods();}setTimeout(()=> {that.noClick= true;}, 2000)} else {// 这里是重复点击的判断console.log("请稍后点击")}}//导出export default {noMultipleClicks,//禁止多次点击}

二、man.js文件引入

 //配置公共方法import common from './common/common.js'Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

三、在实际页面中引用,不带参数,直接传一个方法就行

  //记得在data中挂载   noClick:truedata() {return {noClick:true,}},<view class="bottom-btn-box"><view class="submit-btn" @click="$noMultipleClicks(commitWork)">提交</view></view>methods:{commitWork(){//balabala}           }

四、在实际页面中引用,带参数,传一个方法和一个参数就行

//记得在data中挂载   noClick:true
data() {return {noClick:true,}
},<view class="bottom-btn-box"><view class="pay" @click.stop="$noMultipleClicks(goPay, item)" >支付</view></view>methods:{goPay(item){//balabala}           }

五、参考大佬
大佬
大佬
大佬

五、最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【EI会议征稿中】2024年第四届人工智能、自动化与高性能计算国际会议(AIAHPC 2024)

2024年第四届人工智能、自动化与高性能计算国际会议&#xff08;AIAHPC 2024&#xff09; 2024 4th International Conference on Artificial Intelligence, Automation and High Performance Computing 2024第四届人工智能、自动化与高性能计算国际会议(AIAHPC 2024)将于20…

ubuntu下搜索文件的几种方法

一、whereis命令&#xff1a; whereis命令只能用于程序名的搜索&#xff0c;而且只搜索二进制文件(参数-b)、man说明文件(参数-m)和源代码文件(参数-s)。如果省略参数&#xff0c;则返回所有信息。 whereis的命令格式&#xff1a; whereis [-bmsu] [BMS 目录名 -f ] 文…

CSS——标准流、浮动、Flex布局

1、标准流 标准流也叫文档流&#xff0c;指的是标签在页面中默认的排布规则&#xff0c;例如&#xff1a;块元素独占一行&#xff0c;行内元素可以一行显示多个。 2、浮动 作用&#xff1a;让块元素水平排列 属性名&#xff1a;float 属性值&#xff1a; left&#xff1a;…

three.js模拟太阳系

地球的旋转轨迹目前设置为了圆形&#xff0c;效果&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div c…

MES安灯管理:优化生产监控的重要工具

一、MES安灯管理的概念 MES安灯管理是一种基于物理安灯和数字化管理的生产异常管理工具。它通过物理安灯和数字化系统的结合&#xff0c;实现对生产异常的实时监控和及时反馈&#xff0c;从而帮助企业快速响应和解决生产异常&#xff0c;提高生产效率和产品质量。 二、MES系统…

scala编码

1、Scala高级语言 Scala简介 Scala是一门类Java的多范式语言&#xff0c;它整合了面向对象编程和函数式编程的最佳特性。具体来讲Scala运行于Java虚拟机&#xff08;JVM)之上&#xff0c;井且兼容现有的Java程序&#xff0c;同样具有跨平台、可移植性好、方便的垃圾回收等特性…

爬虫的分类

爬虫的分类 网络爬虫按照系统结构和实现技术&#xff0c;大致可分为4类&#xff0c;即通用网络爬虫、聚焦网络爬虫、增量网络爬虫和深层次网络爬虫。 1.通用网络爬虫&#xff1a;搜索引擎的爬虫 比如用户在百度搜索引擎上检索对应关键词时&#xff0c;百度将对关键词进行分析…

Nacos-NacosRule 负载均衡—设置集群使本地服务优先访问

userservice: ribbon: NFLoadBalancerRuleClassName: com.alibaba.cloud.nacos.ribbon.NacosRule # 负载均衡规则 NacosRule 权重计算方法 目录 一、介绍 二、示例&#xff08;案例截图&#xff09; 三、总结 一、介绍 NacosRule是AlibabaNacos自己实现的一个负载均衡策略&…

宝塔面板快速搭建本地网站结合内网穿透实现远程访问【无需公网IP】

文章目录 前言1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面 前言 宝塔面板作为简单好用的服务器运维管理面板&#xff0c;它支持Linux/Windows系统&#xff0c;我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等&…

mac 安装nvm以及切换node版本详细步骤

1、nvm介绍&#xff08;node版本管理工具&#xff09; nvm 可以让你通过命令行快速安装和使用不同版本的node 有时候项目太老&#xff0c;node版本太高,执行npm install命令会报错,可以借助nvm切换低版本的node。 2、安装nvm 在终端执行安装命令 curl -o- https://raw.gith…

HttpComponents: 概述

文章目录 1. 概述2. 生态位 1. 概述 早期的Java想要实现HTTP客户端需要借助URL/URLConnection或者自己手动从Socket开始编码&#xff0c;需要处理大量HTTP协议的具体细节&#xff0c;不但繁琐还容易出错。 Apache Commons HttpClient的诞生就是为了解决这个问题&#xff0c;它…

【高效开发工具系列】DataGrip入门

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

使用 Tailwind CSS 完成导航栏效果

使用 Tailwind CSS 完成导航栏效果 本文将向您介绍如何使用 Tailwind CSS 创建一个漂亮的导航栏。通过逐步演示和示例代码&#xff0c;您将学习如何使用 Tailwind CSS 的类来设计和定制导航栏的样式。 准备工作 在开始之前&#xff0c;请确保已经安装了 Tailwind CSS。如果没…

day33-37-SpringBootV12(整合Spring,SpringMVC,Mybatis,日志,api测试等框架)

ssm spring --> applicationContext.xml配置文件 springmvc --> springmvc.xml配置文件 mybatis —> mybatis-config.xml配置文件 —> springboot优化了之前的框架配置,思想是约定大于配置 一、引言 1.1 初始化配置 为了使用SSM框架去开发&#xff0c;准备SSM…

12.4~12.14概率论复习与相应理解(学习、复习、备考概率论,这一篇就够了)

未分配的题目 概率计算&#xff08;一些转换公式与全概率公式&#xff09;与实际概率 &#xff0c;贝叶斯 一些转换公式 相关性质计算 常规&#xff0c;公式的COV与P 复习相关公式 计算出新表达式的均值&#xff0c;方差&#xff0c;再套正态分布的公式 COV的运算性质 如…

科研论文中PPT图片格式选择与转换:EPS、SVG 和 PDF 的比较

当涉及论文中的图片格式时&#xff0c;导师可能要求使用 EPS 格式的图片。EPS&#xff08;Encapsulated PostScript&#xff09;是一种矢量图格式&#xff0c;它以 PostScript 语言描述图像&#xff0c;能够无损地缩放并保持图像清晰度。与像素图像格式&#xff08;如 PNG 和 J…

HCIA-H12-811题目解析(3)

1、【单选题】 以下关于路由器的描述&#xff0c;说法错误的是&#xff1f; 2、【单选题】某网络工程师在输入命令行时提示如下信息&#xff1a;Error:Unrecognized command foun at position.对于该提示信息说法正确的是&#xff1f; 3、【单选题】如下图所示的网络&#xf…

C语言之⽂件操作

一为啥需要文件&#xff1f; 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进⾏持久化的保…

机器学习-聚类问题

前言 聚类算法又叫做”无监督分类“&#xff0c;目标是通过对无标记训练样本来揭示数据的内在性质及 规律&#xff0c;为进一步的数据分析提供基础。 Kmeans 作为聚类算法的典型代表&#xff0c;Kmeans可以说是最简单的聚类算法&#xff0c;没有之一&#xff0c;那她是怎么完…

WPF使用WebBrowser报脚本错误问题处理

前言 WPF使用WebBrowser报脚本错误问题处理,我们都知道WPF自带的WebBrowser都用的IE内核,但是在特殊的条件下我们还需要用到它,比如展示纯html简单的页面。再展示主流页面的时候比如用到Jquery高级库或者VUE等当前主流站点时经常就会报JS脚本错误,在Winform里面我们一句代…