防止多次点击,vue的按钮上做简易的防抖节流处理

话不多说,上个视频,看看是不是你要的效果

防抖节流

1.创建一个directive.js

// directive.js
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 || 1000)
					}
				})
			}
		})
	}
}

2.引入到main.js

import directive from './utils/directive.js'; //防止多次点击事件

Vue.use(directive);

3.使用:

<template slot-scope="scope">
          <el-button  v-repeatClick='3000' type="primary" size="mini" 
 @click="sub(scope.row)">插入</el-button>
                            </template>

注意,这个只能放在按钮上