一般用节流防抖的方式处理,
这里通过vue的自定义指令方式也可以
实现:
import Vue from 'vue'
// 自定义指令防止按钮重复点击 v-debounce
const debounce = {
install(Vue) {
// 防止重复点击
Vue.directive('debounce', {
inserted: function(el, binding) {
el.addEventListener('click', () => {
if (el.style['pointer-events'] != 'none') {
el.style['pointer-events'] = 'none';
setTimeout(() => {
el.style['pointer-events'] = 'all';
}, binding.value || 1500)
}
})
}
})
}
}
const tool = {
debounce,
}
export default tool;
main.js中使用一下
import tool from "@/common/js/tool.js"
Vue.use(tool.debounce)
应用:
<view class="debounce-view" @click="debounceClick(3)" v-debounce>
防重复点击
</view>