在utils文件下创建preventRepeatClick.js文件
export default {
install(Vue) {
Vue.directive('preventReClick', {
inserted(el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
// 默认1秒内禁止再次提交
}, binding.value || 1000)
}
})
}
})
}
}在main.js 中调用
import preventReClick from'@/utils/preventRepeatClick.js'
Vue.use(preventReClick)页面使用
// 三秒内不在重复点击 可自行修改
<el-buttonv-preventReClick=“3000”>按钮</el-button>
创建了一个名为preventRepeatClick的JavaScript模块,用于在Vue项目中防止元素在一定时间内被重复点击。该指令在插入元素时监听点击事件,禁用元素并设置一个可配置的延迟时间后重新启用,从而避免快速连续点击导致的多次操作。在main.js中全局注册后,可在页面上的按钮等元素上使用v-preventReClick指令来控制点击间隔。
3968





