vue按钮防止重复点击，防重复提交

最新推荐文章于 2025-04-19 14:55:08 发布

那一日面朝大海

最新推荐文章于 2025-04-19 14:55:08 发布

阅读量3.5k

点赞数

分类专栏：前端框架vue web前端大类

本文链接：https://blog.csdn.net/AN0692/article/details/105528460

版权

web前端大类同时被 2 个专栏收录

29 篇文章

订阅专栏

前端框架vue

21 篇文章

订阅专栏

本文介绍如何在Vue中注册一个全局自定义指令，用于在表单提交后禁用按钮，防止用户重复点击提交，通过添加'class'和'disabled'属性并在3秒后恢复按钮状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注册一个全局自定义指令

// 提交以后禁用按钮一段时间，防止重复提交
Vue.directive('noMoreClick', {
  inserted(el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-disabled');
      el.disabled = true;
      setTimeout(() => {
        el.disabled = false;
        el.classList.remove('is-disabled');
      }, 3000)
    })
  }
});

在使用的按钮处添加v-no-more-click

关注博主即可阅读全文