方法一
1.在utils下创建一个preventReClick.js文件
preventReClick.js
export default {
install (Vue) {
// 防止重复点击
Vue.directive('preventReClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, 3000)
}
})
}
})
}
}
2.在main.js 入口文件引用preventReClick.js
import preventReClick from './utils/preventReClick'
Vue.use(preventReClick)
3.在页面使用
<el-button @click="handleClick" v-preventReClick >提交</el-button>
方法二、
1.在utils/index.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
}
2.使用
<el-button v-preventReClick>提交</el-button>