[uni-app] 防重复点击处理 - 自定义指令
一般用节流防抖的方式处理,
这里通过vue的自定义指令方式也可以
实现:
import Vue from 'vue'
// 自定义指令防止按钮重复点击 v-debounceconst 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>