Vue 防止用户短时间内频繁多次点击

灰太狼 2023-10-10 11:54 54阅读 0赞

功能描述:禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击.

功能实现：使用Vue.directive实现，全局注册，方便其他主键调用

Vue 功能实现：

在mian.js 添加如下代码：

// Vue 定义自定义指令:防止按钮重复提交
    Vue.directive('preventReClick', {
            inserted (el, binding) {
              el.addEventListener('click', () => {
                if (!el.disabled) {
                  el.disabled = true
                  setTimeout(() => {
                    el.disabled = false
                  },binding.value || 1000)
                }
              })
            }
          })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1][]

效果说明:五秒之后 t添加按钮的事件才可再次触发。

**相关知识点补充**

Vue.directive 对象涉及的钩子函数（均为可选）

*  bind  
    只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
 *  inserted  
    被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
 *  update  
    所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
 *  componentUpdated  
    指令所在组件的 VNode 及其子 VNode 全部更新后调用。
 *  unbind  
    只调用一次，指令与元素解绑时调用。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201126170135312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201126170230913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70