当前位置: 首页 > news >正文

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.lryc.cn/news/136776.html

相关文章:

  • 无涯教程-Perl - wait函数
  • DFMA是一种设计思想与方法论
  • 黑客自学路线
  • 怎么维护自己的电脑
  • ansible(2)-- ansible常用模块
  • 一文了解Gin对Cookie的支持z
  • android外卖点餐界面(期末作业)
  • ArcGIS API开发介绍
  • 大数据课程K5——Spark的框架核心概念
  • 【⑬MySQL | 数据类型(一)】简介 | 整数 | 浮点 | 定点类型
  • 5.6 汇编语言:汇编高效数组寻址
  • uniapp - 实现卡片式胶囊单选后右上角出现 “√“ 对勾对号选中效果功能,适用于小程序h5网页app全平台通用(一键复制组件源码,开箱即用!)
  • 使用Jetpack Compose构建可折叠Card
  • 安卓手机跑 vins slam (1)
  • 腾讯云-对象存储服务(COS)的使用总结
  • kafka复习:(3)自定义序列化器和反序列化器
  • Unity 图片资源的适配
  • 【Axure高保真原型】通过输入框动态控制折线图
  • 【Java】树结构数据的搜索
  • ElementUI中的日历组件加载无效的问题
  • Git版本管理(03)stash临时操作和.gitignore配置
  • 【ThingJS | 3D可视化】开发框架,一站式数字孪生
  • SpringBoot返回响应排除为 null 的字段
  • 华为数通方向HCIP-DataCom H12-821题库(单选题:41-60)
  • OpenAI推出GPT-3.5Turbo微调功能并更新API;Midjourney更新局部绘制功能
  • 相机成像之3A算法的综述
  • 最新AI系统ChatGPT程序源码/微信公众号/H5端+搭建部署教程+完整知识库
  • OpenCV实例(九)基于深度学习的运动目标检测(二)YOLOv2概述
  • 【Docker】已经创建好的Docker怎么设置开机自启
  • E - Excellent Views