Vue3实现防抖、单页面引入、全局引入、全局挂载

代码实现

constdebounce=(fn:any,delay:number)=>{lettimer:any=undefined;return(item:any)=>{if(timer)clearTimeout(timer);timer=setTimeout(()=>fn(item),delay);}};exportdefaultdebounce;

单页面引入

// 防抖(单页面引用)importdebouncefrom'../../../utils/debounce';

全局引入

main.ts

importAppfrom'./App.vue';importdebouncefrom'./utils/debounce';constapp=createApp(App);app.config.globalProperties.$debounce=debounce;

使用

html

<el-sliderv-model="sliderValue"size="small"show-input@input="handleScheduleInput"/>

单页面使用

lethandleScheduleInput=debounce((val:number)=>{console.log('滑块: ',val);},1000*1);

全局使用

// 防抖(全局挂载)letself=getCurrentInstance()?.appContext.config.globalProperties;lethandleScheduleInput=self?.$debounce((val:number)=>{console.log('滑块: ',val);},2000*1);