vue 防重复点击、节流、防连点(指令实现),移动端自定义双击事件

节流：

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

防抖 ：

当连续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

项目在开发过程中，防止重复提交或者重复跳转页面
我们可以自己定义一个指令通过节流的方式去处理。
自定义指令，通过在标签原型上面绑定状态的方式，控制是否可以重复点击

下面是实现逻辑

首先在新建一个preventReClick.js文件

export default {
    install(Vue) {
        // 防重复点击(指令实现)
        Vue.directive('preventReClick', {
            inserted(el, binding) {
                el.addEventListener('click', () => {
                    if (!el.disabled) {
                        el.disabled = true
                        setTimeout(() => {
                            el.disabled = false
                        }, binding.value || 3000)
                    }
                })
            }
        })
    }
}

将js文件引入至main.js，并使用

import install from './preventReClick'
Vue.use(install)

给要防止重复点击的按钮加上指令v-preventReClick

vue 双击事件在移动的端没有效果，通过点击事件+时间判断是单击事件还是双击事件