一般用节流防抖的方式处理,
这里通过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中使用一下文章来源：https://www.toymoban.com/news/detail-745773.html
import tool from "@/common/js/tool.js"
Vue.use(tool.debounce)
应用:文章来源地址https://www.toymoban.com/news/detail-745773.html
<view class="debounce-view" @click="debounceClick(3)" v-debounce>
防重复点击
</view>
到了这里，关于[uni-app] 防重复点击处理 - 自定义指令的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
