Vue给所有的点击按钮做防抖

src 下新建 mixins 文件夹,其中新建 debounce.js 在其中写入以下代码:

export default {
  data(){
    return{
      debounceTimer:null,
    }
  },
  methods:{
    debounceMethods(func,...args){
      let context = this;
      if (this.debounceTimer) clearTimeout(this.debounceTimer);
      let callNow = !this.debounceTimer;    //是否立即执行
      this.debounceTimer = setTimeout(() => {
        this.debounceTimer = null;
      },1000)
      if(callNow) func.apply(context,args)
    }
  }
}

然后在 main.js 中进行引用

import Vue from 'vue';
import debounce from '../src/mixins/debounce'

Vue.mixin(debounce)

改写原本的点击方式,例如本来的方式

@click="save(item,index)"

传参直接写入方法的后面即可

@click="debounceMethods(save,item,index)"
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容