vue防按钮频繁点击(自定义指令)

最新推荐文章于 2024-06-25 10:09:04 发布

Zheng_xinle

最新推荐文章于 2024-06-25 10:09:04 发布

阅读量485

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Zheng_xinle/article/details/119886785

版权

本文介绍了一种通过在Vue主文件main.js中定义自定义指令`v-preventReClick`来避免Element-UI按钮频繁点击触发请求的方法。该指令在点击按钮时会将其设置为disabled状态，防止短时间内再次点击，2秒后自动恢复。此方法适用于防止表单重复提交或其他需要防止频繁请求的场景，但在非按钮元素如div上可能不生效。

摘要由CSDN通过智能技术生成

频繁点击就会频繁触发请求，为了避免这种情况，可以自定义指令来实现

在这里插入图片描述

在main.js中写以下代码

// 复制粘贴在main.js里
// 自定义指令：解决element-ui按钮重复点击
Vue.directive('preventReClick', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 2000)
           //binding.value可以自行设置。如果设置了则跟着设置的时间走
         //例如：v-preventReClick='500'
      }
    })
  }
})