Vue自定义防重复点击指令（v-repeatClick）

 ！！！Vue防抖节流方法：VUE使用节流和防抖_vue防抖节流_停留的章小鱼的博客-CSDN博客

新建js文件directive.js:

// directive.js
// 防重复点击(指令实现)
//使用： 在需要的按钮中加 v-repeatClick 指令即可 保存
export default {
	install(Vue) {
		Vue.directive('repeatClick', {
			inserted(el, binding) {
				el.addEventListener('click', () => {
					if (!el.disabled) {
						el.disabled = true
						setTimeout(() => {
							el.disabled = false
						}, binding.value || 1500)
					}
				})
			},
		})
	},
}

全局引入main.js文件:

import directive from '@/utils/directive';
Vue.use(directive);

页面使用：

保存