Vue防重复点击(指令实现)
快速点击按钮会重复多次调用接口，防止出现这样的情况
全局定义，方便调用
新建plugins.js
install (Vue) {
// 防重复点击(指令实现)
Vue.directive('reClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
})
}
}
在main.js引用
import plugin from '@/assets/js/plugin.js' //引用公共js，里面有公共方法
Vue.use(plugin)
按钮调用直接加v-reClick
<el-button type="prismary" style="width:100%;" @click="handleSubmit" v-reClick></el-button>
