vue实现button按钮的重复点击指令方式_Javascript

vue实现button按钮的重复点击指令

// 注册一个全局自定义指令 `v-debounce`
vue.directive('debounce', {
  // 当被绑定的元素插入到 dom 中时...
  inserted: function (el, binding) {
    let timer;
    el.addeventlistener('click', () => {
      cleartimeout(timer);
      timer = settimeout(() => {
        binding.value(); // 调用传给指令的方法
      }, 500);
    });
  },
  // 当绑定元素的父组件更新时...
  update: function (el, binding) {
    let timer;
    el.addeventlistener('click', () => {
      cleartimeout(timer);
      timer = settimeout(() => {
        binding.value(); // 调用传给指令的方法
      }, 500);
    });
  }
});

// 使用指令
// 在组件中
<template>
  <button v-debounce="myclickhandler">click me</button>
</template>

<script>
export default {
  methods: {
    myclickhandler() {
      // 处理点击事件
    }
  }
}
</script>

vue提交表单重复点击，重复提交防抖问题

问题：用户点击保存时，可能会多次点击。导致生成重复数据。

目标：多次点击时，1s内只允许提交一次数据。

解决方案

1.在utils文件夹创建文件preventreclick.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 || 2000)
            }
          })
        }
      })
    }
  }

2.在main.js中引入