vue阻止重复点击preventReClick需改进

为实现统一的防止重复点击触发方法，查看了网上资料显示：

一，引入preventReClick.js

import Vue from 'vue'
 
const preventReClick = Vue.directive('preventReClick', {
    inserted: function (el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 3000)
            }
        })
    }
});
 
export { preventReClick }

二，在main.js中引入：

import preventReClick from './store/preventReClick' //防多次点击，重复提交

三，实现方式： 

<div @click="click" v-preventReClick="5000">测试多次重复请求</div>

划重点：然而，经测试表明，只针对el-button生效， 针对普通的div或者自行封装的组件并没有效果，因为disabled正常情况下，不会阻止@click的点击效果。

为此，进行如下改进：

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
    inserted: function(el, binding) {
        el.addEventListener('click', (e) => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 1000)
            } else { // disabled为true时，阻止默认的@click事件
                e.preventDefault()
                e.stopPropagation()
            }
        }, true)
    }
});

export { preventReClick }

重点在最后一个参数上，addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。