标签：el 防抖 自定义 -- param 简易版 timer type any

/*  * @Descripttion: 自定义指令  * @version:  */ export const direcitiveFUc = (app: any) => {     /*     * @Descripttion: 防抖,单位时间内触发最后一次     * @param [function] func --执行事件     * @param [?number|300] wait = 300 -- 时间间隔     * @param [?string|"click"] event -- 事件类型     * @param [?boolean|true] boolean -- 事件冒泡-false , 事件捕获--true     * @param [Array] binding.value - [func,type,wait,true]       * <a-button v-debounce="[test,'click',1000,true]">防抖测试</a-button>     */     app.directive('debounce', {         beforeMount(el: any, binding: any) {             let [                 func,                 type = 'click',                 wait = 300,                 immediate = true             ] = binding.value;             let timer: any             el.$type = type;             el.$handle = () => {                 timer && clearTimeout(timer)                 timer = setTimeout(() => func(), wait)             }             el.addEventListener(el.$type, el.$handle, immediate);         },         unmounted(el: any) {             el.removeEventListener(el.$type, el.$handle);         }     })
    /*     * @Descripttion: 节流,单位时间内可触发一次     * @param [function] func --执行事件     * @param [?number|300] wait = 300 -- 时间间隔     * @param [?string|"click"] event -- 事件类型     * @param [?boolean|true] boolean -- 事件冒泡-false , 事件捕获--true     * @param [Array] binding.value - [func,type,wait,true]       * <a-button v-debounce="[throttle,'click',1000,true]">防抖测试</a-button>     */     app.directive('throttle', {         beforeMount(el: any, binding: any) {             let [                 func,                 type = 'click',                 wait = 300,                 immediate = true             ] = binding.value;             let timer: any, timer_end: any             el.$type = type;             el.$handle = () => {                 if (timer) {                     clearTimeout(timer_end)                     return timer_end = setTimeout(() => func, wait)                 }                 func()                 timer = setTimeout(() => null, wait);             }             el.addEventListener(el.$type, el.$handle, immediate);         },         unmounted(el: any) {             el.removeEventListener(el.$type, el.$handle);         }     }) } // 使用 在main.ts 中导入 import { direcitiveFUc } from './directives/index' const app = createApp(App); direcitiveFUc(app) app.mount('#app');   //页面使用 列：<a-button v-debounce="[test,'click',1000,true]">防抖测试</a-button>

标签：el,防抖,自定义,--,param,简易版,timer,type,any
来源： https://www.cnblogs.com/wenqylh/p/15553037.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。