vue3提交按钮限制重复点击

下载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防抖：适合用于提交表单、搜索、输入框输入、窗口调整事件

案例