美文网首页vue
Vue给所有的点击按钮做防抖

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

作者: 辉夜真是太可爱啦 | 来源:发表于2021-08-09 19:20 被阅读0次

    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)"
    

    相关文章

      网友评论

        本文标题:Vue给所有的点击按钮做防抖

        本文链接:https://www.haomeiwen.com/subject/wixtbltx.html