vue 自定义指令,实现防止重复点击（节流）

2024-11-23 来源：个人技术集锦

vue 自定义指令,实现防止重复点击（节流）

vue 自定义指令

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行 Vue.use()调用。

指令定义函数提供了几个钩子函数（可选）：
bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

实现防止按钮快速点击触发多次事件

1.新建 js 文件

import Vue from 'vue'
// 自定义指令防止按钮重复点击 v-preventReClick
export default {
  install(Vue) {
      // 防止重复点击
      Vue.directive('preventReClick', {
        inserted:function(el,binding){
          el.addEventListener('click', () => {
                            if (el.style['pointer-events'] != 'none') {
                                el.style['pointer-events'] = 'none';
                                setTimeout(() => {
                                    el.style['pointer-events'] = 'all';
                                }, binding.value || 1500)
                            }
                        })
         }
      })
  }
}

2.在 main.js 引用上面的文件

import preventReClick from './common/utils/utils'
Vue.use(preventReClick);

3.在触发事件的按钮上直接使用指令

<div class="submit-btn" @click="submitMes()" v-preventReClick="3000">发送</div>

<div class="submit-btn" @click="submitMes()" v-preventReClick>发送</div>(默认1500ms 按照js文件里面)

pointer-events 相关总结

注意：使用 pointer-events 来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了 pointer-events 属性并允许其成为鼠标事件的目标。

常用场景

1、屏蔽鼠标事件（hover、active、onclick、阻止缺省鼠标指针的显示）
2、事件穿透

/_ 属性值 /
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; / 只适用于 SVG /
pointer-events: visibleFill; / 只适用于 SVG /
pointer-events: visibleStroke; / 只适用于 SVG /
pointer-events: visible; / 只适用于 SVG /
pointer-events: painted; / 只适用于 SVG /
pointer-events: fill; / 只适用于 SVG /
pointer-events: stroke; / 只适用于 SVG /
pointer-events: all; / 只适用于 SVG _/

/_ 全局值 _/
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

显示全文

全部栏目

vue 自定义指令,实现防止重复点击（节流）