vue中防止用户在短时间内频繁多次点击按钮的解决办法

来源:网络 文章列表 2020-11-07 8
第一种方法:在规定时间内将按钮禁用的方法:1.主要思想就是禁止用户在一定的时间多次点击,在一定时间内将按钮禁用,用定时器实现,一定时间之后用户可再次点击。第二种方法:用指令的方式实现,全局注册,方便。

介绍两种vue项目中防止用户在一定时间内频繁点击按钮触发事件的方法

第一种方法:在规定时间内将按钮禁用的方法

1.主要思想就是禁止用户在一定的时间多次点击,在一定时间内将按钮禁用,用定时器实现,一定时间之后用户可再次点击

第二种方法:用指令的方式实现,全局注册,方便

1. 新建js文件(因为是全局可用的,文件可以叫preventRepeatClick.js,我这里是叫index.js)

代码如下:

export default {

  install (Vue) {

    // 防止重复点击

    Vue.directive('preventReClick', {

      inserted (el, binding) {

          console.log("binding-7",binding)

        el.addEventListener('click', () => {

          if (!el.disabled) {

            el.disabled = true

            setTimeout(() => {

              el.disabled = false

            },binding.value || 1000)

          }

        })

      }

    })

  }

}

1. 在main.js中引入上面的js文件

2. 在触发点击事件的按钮上直接用指令即可

3. 五秒之后 按钮下面的事件才可再次触发

上面就是防止用户在一定时间内重复频繁的触发事件的两种方法~

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论