在main.js中全局注册组件Debounce//debouncethrottlingimportDebouncefrom'./debounce.js'Vue.component('Debounce',Debounce)组件核心代码debounce.js//debounce.js/***反抖动节流*@param{function}func执行函数*@param{number}time防抖节流时间*@param{string}typedebounce为防抖，throttle为节流，否则立即执行*@param{this}ctxthispoint*/constdebounce=(func,time,type,ctx)=>{vartimer,lastCall,rtn//去抖函数if(type==='debounce'){rtn=(...params)=>{if(timer)clearTimeout(timer)timer=setTimeout(()=>{func.apply(ctx,params)},time)}}elseif(type==='throttle'){//节流函数rtn=(...params)=>{constnow=newDate().getTime()if(now-lastCall{if(timer)clearTimeout(timer)letcallNow=!timertimer=setTimeout(()=>{timer=null},time)if(callNow)func.apply(ctx,params)}}returnrtn}exportdefault{name:'Debounce',abstract:true,props:{time:{type:Number,default:1000,},事件：{type:String,default:'click',//默认点击事件},type:{type:String,default:'throttle',//默认油门},},created(){this.eventKeys=this.events.split(',')//分离事件this.originMap={}//存储事件，用于重新渲染时与子事件进行比较this.debouncedMap={}//存储防抖节流事件},render(){try{constvnode=this.$slots.default[0]this.eventKeys.forEach(key=>{consttarget=vnode.data.on[key]if(target===this.originMap[key]&&this.debouncedMap[key]){vnode.data.on[key]=this.debouncedMap[key]}elseif(target){this.originMap[key]=targetthis.debouncedMap[key]=debounce(target,this.time,this.type,vnode)vnode.data.on[key]=this.debouncedMap[key]//重写子组件的事件}})returnvnode}catch(error){}},}组件使用标签包裹按钮；
