为实现统一的防止重复点击触发方法,查看了网上资料显示:
一,引入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 时, 事件使用捕获传递。