Vue给所有的点击按钮做防抖
Vue给所有的点击按钮做防抖在src下新建mixins文件夹,其中新建debounce.js在其中写入以下代码:export default {data(){return{debounceTimer:null,}},methods:{debounceMethods(func,...args){let context = this;if (this.debounceTimer) clearTimeo
·
Vue给所有的点击按钮做防抖
这里主要用了vue的混入(mixin)的方法
在 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)
也可以在按需引入
import mixin from '@/mixins/mixin' //按需引入需要的页面
export default {
mixins: [mixin], //这样就可以直接使用方法了 this.方法名()
data() {
return {
}
},
mounted() {
}
}
改写原本的点击方式,例如本来的方式
@click="save(item,index)"
传参直接写入方法的后面即可
@click="debounceMethods(save,item,index)"
更多推荐
已为社区贡献1条内容
所有评论(0)