vue2实现点击按钮防抖自定义事件

  1. 在directive文件下新建 debounce.js
// 函数防抖 指令（v-debounce）, 限制0.3s内点击多次只执行最后一次
export default {
    inserted: function (el, binding) {
        let timer
        el.addEventListener('click', () => {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                binding.value()
            }, 300)
        })
    }
}
  1. 在main.js引入并注册事件
// 自定义指令
import directive from './directive'

for (const n in directive) {
    Vue.directive(n, directive[n])
}
  1. 在组件中使用
<!-- handleConfirm 要执行的点击事件 -->
<el-button 
    type="primary"
    v-debounce="handleConfirm">保存</el-button>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容