perventReClick.js
JAVASCRIPTimport Vue from 'vue'
const disClass = 'preventRe-disabled'
const disStyle = document.createElement('style')
disStyle.innerHTML = `.${disClass}{filter: grayscale(70%) opacity(0.7);cursor: not-allowed !important;}`
document.head.appendChild(disStyle)
Vue.directive('preventReClick', {
inserted: function (el, binding) {
let timer = null
el.addEventListener('click', () => {
if (!el.classList.contains(disClass)) {
binding.value()
}
el.classList.add(disClass)
clearTimeout(timer)
timer = setTimeout(() => {
el.classList.remove(disClass)
clearTimeout(timer)
}, binding.arg || 1000)
})
}
});
使用方法
-
- main.js添加些句
import './plugins/perventReClick'
- main.js添加些句
-
- 按钮点击事件改成
v-preventReClick="add"
- 按钮点击事件改成
ps: <el-button @click="add">新增</el-button> ==> <el-button v-preventReClick:2000="add">新增</el-button>