vue uniapp 防止按钮多次点击(类似于防抖节流)

common文件并创建anti-shake.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 {// 这里是重复点击的判断}
}
//导出
export default {noMultipleClicks,//禁止多次点击
}

man.js文件中引入

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

页面里使用即可

不传参,直接传一个方法就行

//记得在data中挂载   noClick:true,否则点击会失效
data() {return {noClick:true,}
},<view class="bottom-btn-box"><view class="submit-btn" @click="$noMultipleClicks(commitWork)">提交</view>
</view>methods:{
//提交方法commitWork(){}           
}

带参数,传一个方法和一个参数就行 

//记得在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.mzph.cn/news/50912.shtml

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

相关文章

Spring6.0官方文档示例:(27)配置文件中bean定义的继承关系

一、实体类 package cn.edu.tju.domain;public class DerivedTestBean {private String name;private int age;public String getName() {return name;}public void setName(String name) {this.name name;}public int getAge() {return age;}public void setAge(int age) {t…

洗涤护理门店小程序DIY制作教程

随着移动互联网的快速发展&#xff0c;小程序成为了各行各业推广和服务的新平台。对于干洗店来说&#xff0c;拥有一个专属的洗护小程序不仅可以提升用户体验&#xff0c;还能增加店铺的曝光度和销售额。那么&#xff0c;如何DIY制作一个干洗店洗护小程序呢&#xff1f; 首先&a…

SpringBoot利用ConstraintValidator实现自定义注解校验

一、前言 ConstraintValidator是Java Bean Validation&#xff08;JSR-303&#xff09;规范中的一个接口&#xff0c;用于实现自定义校验注解的校验逻辑。ConstraintValidator定义了两个泛型参数&#xff0c;分别是注解类型和被校验的值类型。在实现ConstraintValidator接口时&…

Android中正确使用Handler的姿势

在Android中&#xff0c;Handler是一种用于在不同线程之间传递消息和任务的机制。以下是在Android中正确使用Handler的一些姿势&#xff1a; 1. 在主线程中创建Handler对象 在Android中&#xff0c;只有主线程&#xff08;也称为UI线程&#xff09;可以更新UI。因此&#xff…

控制Unity发布的PC包的窗体

大家好&#xff0c;我是阿赵。   用Unity发布PC包接入某些渠道时&#xff0c;有时候会收到一些特殊的需求&#xff0c;比如控制窗口最大化(比如某些情况强制显示窗体)、最小化(比如老板键)、强制规定窗体置顶等。虽然我一直认为这些需求都是流氓软件行为&#xff0c;但作为一…

【微信小程序】小程序之间的跳转方式总结

想要从该小程序跳转到其他小程序怎么做&#xff1f; 方式 小程序之间的跳转方法有&#xff1a; wx.navigateTo&#xff1a;保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;然后从该页面返回上一页的时候使用wx.navigateBack返回。wx.switchTab&#xff1a;跳转…

基于Spark+django的国漫推荐系统--计算机毕业设计项目

近年来&#xff0c;随着互联网的蓬勃发展&#xff0c;企事业单位对信息的管理提出了更高的要求。以传统的管理方式已无法满足现代人们的需求。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;随着各行业的不断发展&#xff0c;基…

【Java架构-包管理工具】-Maven基础(一)

本文摘要 Maven作为Java后端使用频率非常高的一款依赖管理工具&#xff0c;在此咱们由浅入深&#xff0c;分三篇文章&#xff08;Maven基础、Maven进阶、私服搭建&#xff09;来深入学习Maven&#xff0c;此篇为开篇主要介绍Maven概念、模型、安装配置、基本命令 文章目录 本文…

动态规划入门之洛谷创始人kk偷懒摆烂

P2392 kkksc03考前临时抱佛脚 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 这个题目的难点在于我们该怎么尽量让左右大脑均分题目时间呢&#xff0c;我们这样想&#xff0c;我们先将所有题目的时间总和累加起来&#xff0c;取其一半。我们知道如果将这n道题目进行时间的尽量…

DP读书:鲲鹏处理器 架构与编程(十)鲲鹏软件生态与云服务

十秒带你了解鲲鹏软件生态与云服务 鲲鹏软件生态与云服务ARM授权机制在传统的PC领域&#xff0c;半导体厂商的业务类型主要分为两种&#xff1a;在移动领域&#xff0c; ARM服务器生态鲲鹏服务器软件生态1. 鲲鹏计算产业2. 鲲鹏软件生态兼容性3. openEluer操作系统4. 鲲鹏软件栈…

Nexus(Maven管理器)下载和安装

我们以 Nexus 2.x 为例&#xff0c;演示 Nexus 的安装过程。 官方下载地址 1. 进入 Nexus 2.x 下载页面&#xff0c;根据本机操作系统&#xff0c;选择对应的版本进行下载&#xff0c;如下图所示。 2. 将下载 Nexus 安装包解压到本地磁盘&#xff0c;可获得 nexus-2.14.20-0…

内网穿透实战应用-windwos10系统搭建我的世界服务器,内网穿透实现联机游戏Minecraft

文章目录 1. Java环境搭建2.安装我的世界Minecraft服务3. 启动我的世界服务4.局域网测试连接我的世界服务器5. 安装cpolar内网穿透6. 创建隧道映射内网端口7. 测试公网远程联机8. 配置固定TCP端口地址8.1 保留一个固定tcp地址8.2 配置固定tcp地址 9. 使用固定公网地址远程联机 …

【c语言】文件操作 万字详解

目录 一&#xff0c;为什么使用文件 二&#xff0c;什么是文件 1&#xff0c;程序文件 2&#xff0c;数据文件 3&#xff0c;文件名 三&#xff0c;文件的打开和关闭 1&#xff0c;文件指针 2&#xff0c;文件的打开和关闭 四&#xff0c; 文件的顺序读写 1&#xff0c;顺序…

stm32控制蜂鸣器源代码(附带proteus线路图)

说明&#xff1a; 1 PB0输出0时&#xff0c;蜂鸣器发生&#xff1b; 2 蜂鸣器电阻值如果太大会导致电流太小&#xff0c;发不出声音&#xff1b; 3蜂鸣器额定电压需要设置得低一点&#xff0c;可以是2V&#xff0c;但不能高于3V&#xff0c;这更右上角的电阻值有关系&#x…

【算法专题突破】双指针 - 移动零(1)

目录 写在前面 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 写在前面 在进行了剑指Offer和LeetCode hot100的毒打之后&#xff0c; 我决心系统地学习一些经典算法&#xff0c;增强我的综合算法能力。 1. 题目解析 题目链接&#xff1a;283. 移动零 - 力…

一网打尽java注解-克隆-面向对象设计原则-设计模式

文章目录 注解内置注解元注解 对象克隆为什么要克隆&#xff1f;如何克隆浅克隆深克隆 Java设计模式什么是设计模式&#xff1f;为什么要学习设计模式&#xff1f; 建模语言类接口类之间的关系依赖关系关联关系聚合关系组合关系继承关系实现关系 面向对象设计原则单一职责开闭原…

无涯教程-PHP - 移除的扩展

以下扩展已从PHP 7开始删除- eregmssqlmysqlsybase_ct 以下SAPI已从PHP 7开始删除- aolserverapacheapache_hooksapache2filtercaudiumcontinuityisapimilternsapiphttpdpi3webroxenthttpdtuxwebjames PHP - 移除的扩展 - 无涯教程网无涯教程网提供以下扩展已从PHP 7开始删除…

【SVN内网穿透】远程访问Linux SVN服务

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

jvm-运行时数据区概述及线程

1.运行时数据区内部结构 不同的jvm对于内存的划分方式和管理机制存在着部分差异 java虚拟机定义了若干种程序运行期间会使用到的运行时数据区&#xff0c;其中有一些会随着虚拟机的启动而创建&#xff0c;随着虚拟机的退出而销毁&#xff0c;另外一些则是与线程一一对应的&…

Django的模型层

Django的模型层1.Model的开发流程2.定义Model模型3.Model模型的实例4.Model模型的实战操作笔记开发流程1.在models.py中定义模型类&#xff0c;要求继承自models.Model2.生成迁移文件3.执行迁移5.定义属性1.字段类型2.字段选项3.关系模型实例1.类的属性2.创建对象3.实例的属性模…