vue3提交按钮限制重复点击debounce防抖

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

案例