vue3自定义指令防止表单重复提交

可以设置在某个事件段内不允许重复提交;或者点击提交后设置提交flag,flag为true则不能再次提交 

<template><div><h1>防止表单重复提交</h1><button @click="submitForm" v-throttle>提交</button></div>
</template>
<script lang="ts">
export default {setup(props: any, ctx: any) {console.log(props, ctx);const submitForm = () => {console.log("提交表单");};return {submitForm};},directives: {throttle: {// 需要使用created事件钩子created: (el: any, binding: any) => {let throttleTime = binding.value; // 节流时间if (!throttleTime) {// 用户若不设置节流时间,则默认2sthrottleTime = 2000;}let cbFun: any;el.addEventListener("click",(event: any) => {if (!cbFun) {// 第一次执行cbFun = setTimeout(() => {cbFun = null;}, throttleTime);} else {event && event.stopImmediatePropagation();}},true);}}}
};
</script>

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

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

相关文章

SpringBoot 的 RedisTemplate、Redisson

一、Jedis、Lettuce、Redisson的简介 优先使用Lettuce&#xff0c; 需要分布式锁&#xff0c;分布式集合等分布式的高级特性&#xff0c;添加Redisson结合使用。 对于高并发&#xff0c;1000/s的并发&#xff0c;数据库可能由行锁变成表锁&#xff0c;性能下降会厉害。 1.1、…

再JAVA中如何使用qsort对类进行排序?

目录 结论&#xff1a; 解析&#xff1a; 结论&#xff1a; import java.util.Arrays;class Person implements Comparable<Person>{public String name;public int age;public Person(String name, int age) {this.name name;this.age age;}Overridepublic Stri…

[保研/考研机试] KY11 二叉树遍历 清华大学复试上机题 C++实现

题目链接&#xff1a; 二叉树遍历_牛客题霸_牛客网编一个程序&#xff0c;读入用户输入的一串先序遍历字符串&#xff0c;根据此字符串建立一个二叉树&#xff08;以指针方式存储&#xff09;。题目来自【牛客题霸】https://www.nowcoder.com/share/jump/43719512169254700747…

机器学习笔记之优化算法(十五)Baillon Haddad Theorem简单认识

机器学习笔记之优化算法——Baillon Haddad Theorem简单认识 引言 Baillon Haddad Theorem \text{Baillon Haddad Theorem} Baillon Haddad Theorem简单认识证明过程证明&#xff1a;条件 1 ⇒ 1 \Rightarrow 1⇒ 条件 2 2 2证明&#xff1a;条件 3 ⇒ 3 \Rightarrow 3⇒条件 1…

css3+js 画出爱心特效

要使用CSS3和JavaScript绘制爱心特效&#xff0c;可以使用CSS3的动画和过渡效果来创建爱心的形状&#xff0c;并使用JavaScript来控制动画的触发和交互。以下是一个简单的示例代码&#xff1a; HTML: <div class"heart"></div> <button onclick&quo…

玩转单元测试之gmock

引言 前文我们学习了gtest相关的使用&#xff0c;单靠gtest&#xff0c;有些场景仍然无法进行测试&#xff0c;因此就诞生了gmock。 gmock快速入门 在引入gtest时&#xff0c;gmock也同样引入了&#xff0c;因此只需要在编译时加上合适的编译选项即可&#xff0c;注意不同版…

算法通关村十一关 | 位运算实现加法和乘法

1.位实现加法和乘法 在计算机中&#xff0c;位运算的效率要比加减乘除的效率更高&#xff0c;因此在高性能软件中源码中大量使用&#xff0c;计算机里各种运算基本上都是位运算。 学习下面内容之前建议先学习位运算规则&#xff1a;算法通关村十一关 | 位运算的规则_我爱学算…

【MaxKey对接一】对接gitlab的oauth登录

MaxKey的Oauth过程 引导进入 GET http://{{maxKey_host}}/sign/authz/oauth/v20/authorize?client_idYOUR_CLIENT_ID&response_typecode&redirect_uriYOUR_REGISTERED_REDIRECT_URI 登录后回调地址 YOUR_REGISTERED_REDIRECT_URI/?code{{code}} 换取Access Token GET…

winform使用usercontrol 构建了一个复杂的列表,列表速度慢该如何优化?

当使用 WinForms 构建复杂的列表时&#xff0c;可能会面临性能问题&#xff0c;特别是在数据量大或 UI 复杂的情况下。以下是一些优化策略&#xff0c;可以帮助您改善列表的性能&#xff1a; 1. **虚拟模式 (Virtual Mode)**&#xff1a;对于大型数据集&#xff0c;考虑使用虚…

「UG/NX」Block UI 曲线收集器CurveCollector

✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C+&#

docker 01(初识docker)

一、docker概念 Docker是一个开源的应用容器引擎&#xff1b;诞生于2013年初&#xff0c;基于Go 语言实现&#xff0c;dotCloud公司出品(后改名为Dockerlnc);Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的Linux …

网络安全设备篇——加密机

加密机是一种专门用于数据加密和解密的网络安全设备。它通过使用密码学算法对数据进行加密&#xff0c;从而保护数据的机密性和完整性。加密机通常被用于保护敏感数据&#xff0c;如金融信息、个人身份信息等。 加密机的主要功能包括&#xff1a; 数据加密&#xff1a;加密机使…

探究Java spring中jdk代理和cglib代理!

面对新鲜事物&#xff0c;我们要先了解在去探索事物的本质-默 目录 一.介绍二者代理模式 1.1.Jdk代理模式 1.2cglib代理模式 1.3二者区别 1.3.1有无接口 1.3.2灵活性 1.4对于两种代理模式的总结 1.4.1jdk代理模式 1.4.2cglib代理模式 二.两种代理模式应用场景 2.1jd…

数学建模-多元线性回归笔记

数学建模笔记 1.学模型✅ 2.看专题论文并复习算法 多元线性回归 无偏性&#xff1a;预测值与真实值非常接近一致性&#xff1a;样本量无限增大&#xff0c;收敛于待估计参数的真值如何做&#xff1a;控制核心解释变量和u不相关 四类模型回归系数的解释 截距项不用考虑一元线性…

搜狗拼音占用了VSCode及微信小程序开发者工具快捷键Ctrl + Shit + K 搜狗拼音截图快捷键

修改搜狗拼音的快捷键 右键--更多设置--属性设置--按键--系统功能快捷键--系统功能快捷键设置--取消Ctrl Shit K的勾选--勾选截屏并设置为Ctrl Shit A 微信开发者工具设置快捷键 右键--Command Palette--删除行 微信开发者工具快捷键 删除行&#xff1a;Ctrl Shit K 或…

【开源项目】Stream-Query的入门使用和原理分析

前言 无意间发现了一个有趣的项目&#xff0c;Stream-Query。了解了一下其基本的功能&#xff0c;可以帮助开发者省去Mapper的编写。在开发中&#xff0c;我们会编写entity和mapper来完成业务代码&#xff0c;但是Stream-Query可以省去mapper&#xff0c;只写entity。 快速入…

CSDN编程题-每日一练(2023-08-22)

CSDN编程题-每日一练(2023-08-22) 一、题目名称:最长递增区间二、题目名称:K树三、题目名称:小Q的价值无向图一、题目名称:最长递增区间 时间限制:1000ms内存限制:256M 题目描述: 给一个无序数组,求最长递增的区间长度。如:[5,2,3,8,1,9] 最长区间 2,3,8 长度为 3。…

分布式事务理论基础

今天啊&#xff0c;本片博客我们一起来学习一下微服务中的一个重点和难点知识&#xff1a;分布式事务。 我们会基于Seata 这个框架来学习。 1、分布式事务问题 事务&#xff0c;我们应该比较了解&#xff0c;我们知道所有的事务&#xff0c;都必须要满足ACID的原则。也就是 …

Hadoop集群搭建(hadoop-3.3.5)

一、修改服务器配置文件 1、配置环境变量 vim /etc/profile #java环境变量 export JAVA_HOME/usr/local/jdk/jdk8 export JRE_HOME$JAVA_HOME/jre export CLASSPATH$JAVA_HOME/lib:$JRE_HOME/lib:$CLASSPATH export PATH$JAVA_HOME/bin:$JRE_HOME/bin:$PATH #hadoop环境变量 …

c++关键字 =delete和=default

在C的类中&#xff0c;有四类特殊的成员函数&#xff1a;① 默认构造函数&#xff1b;② 拷贝构造函数&#xff1b;③ 拷贝赋值函数&#xff08;operator&#xff09;&#xff1b;④ 析构函数&#xff1b;它们控制着类的实例的创建、初始化、拷贝以及销毁。 &#xff08;1&…