[uni-app] 防重复点击处理 - 自定义指令

一般用节流防抖的方式处理,
这里通过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>