按钮防抖是个自古以来的老问题
以下可以解决所有vue的事件绑定防抖,
但是原生事件绑定不行,
// 全局点击防抖处理
const on = Vue.prototype.$on
Vue.prototype.$on = function (e, func) {
// 目前只有点击需要防抖
if (e === 'click') {
let sto
on.call(this, e, function () {
sto ? clearTimeout(sto) : func.apply(this, arguments)
sto = setTimeout(() => sto = undefined, 500)
// 点击后移除焦点
this.$el && this.$el.blur()
})
} else {
on.call(this, e, func)
}
}
点击后移除焦点是解决点击按钮后弹窗, 此时按回车或空格会继续触发按钮点击
造成不必要的困扰