vue3——两种利用自定义指令实现防止按钮重复点击的方法

方法一：利用定时器设置时间，下方代码设置时间为1秒

但是有个缺点：请求如果很慢，1秒钟还没有好，那么该方法就没用了

  // 利用定时器：1秒之后才能再次点击
  app.directive('preventReClick', {
    mounted: (el, binding) => {
      el.addEventListener('click', () => {
        if (!el.disabled) {
          el.disabled = true
          setTimeout(() => {
            el.disabled = false
          }, binding.value || 1000)
        }
      })
    }
  })

---

方法二：传入请求的函数作为参数，根据请求的finally来判断是否可以点击了，更推荐！！！

但是传入的参数必须是一个promise函数，否则就没用了

  //自定义指令版本2：根据请求结果防止按钮重复提交请求
  //使用方式：传递一个请求函数，比如v-prevent-dup-click="submit"
  app.directive('preventDupClick', {
    mounted(el, binding) {
     //传递的参数必须是一个函数，否则报错
      if (typeof binding.value !== 'function') {
        throw new Error('v-prevent-dup-click instruction can transmit only A function')
      }
      // 一开始是未点击状态
      el.isClicked = false
      const handerClick = function (event) {
        // 如果已经点击过，则阻止事件
        if (el.isClicked === 'true') {
          event.preventDefault()
          event.stopPropagation()
          return
        }
        // 标记为已点击
        el.isClicked = 'true'
        // 调用传入的函数
        binding.value().finally(() => {
          el.isClicked = 'false'
        })
      }
      el.hander = handerClick
      el.addEventListener('click', handerClick)
    },
    //销毁事件
    beforeUnmount(el) {
      if (el.hander) {
        el.removeEventListener('click', el.hander)
      }
    }
  })

原文地址：https://blog.csdn.net/zmy967131/article/details/140682680

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！