vue自定义全局指令-实现防抖与节流

export default {
    install(Vue, Options) {
        // 添加全局混入
        Vue.mixin({
            mounted() {
                console.log('组件创建成功')
            },
        })
        // 添加全局过滤器
        Vue.filter('ellipsTexts', (text, num) => {
            if (text) {
                if (text.length > num) {
                    return text.substring(0, num) + '...';
                } else {
                    return text;
                }
            } else {
                return text;
            }
        })
        // 添加全局指令 只能输入数字 v-number-only
        Vue.directive('numberOnly', {
            bind(el) {
                el.handler = function () {
                    el.value = el.value.replace(/\D+/, '');
                };
                el.addEventListener('input', el.handler);
            },
            unbind(el) {
                el.removeEventListener('input', el.handler);
            }
        })
        /***
        * 防抖 单位时间只触发最后一次
        *  @param {?Number|300} time - 间隔时间
        *  @param {Function} fn - 执行事件
        *  @param {?String|"click"} event - 事件类型 例："click"
        *  @param {Array} binding.value - [fn,event,time]
        *  例：<el-button v-debounce="[reset,`click`,300]">刷新</el-button>
        *  也可简写成：<el-button v-debounce="[reset]">刷新</el-button>
        */
        Vue.directive('debounce', {
            inserted: function (el, binding) {
                let [fn, event = "click", time = 300] = binding.value
                let timer
                el.addEventListener(event, () => {
                    timer && clearTimeout(timer)
                    timer = setTimeout(() => fn(), time)
                })
            }
        })
        /***
        *  节流 每单位时间可触发一次
        *  第一次瞬间触发，最后一次不管是否达到间隔时间依然触发
        * 【考虑到input的change事件】
        *  @param {?Number|300} time - 间隔时间
        *  @param {Function} fn - 执行事件
        *  @param {?String|"click"} event - 事件类型 例："click"
        *  @param {Array} binding.value - [fn,event,time]
        *  例：<el-button v-throttle="[reset,`click`,300]">刷新</el-button>
        *  传递参数则：<el-button v-throttle="[()=>reset(param),`click`,300]">刷新</el-button>
        */
        Vue.directive('throttle', {
            inserted: function (el, binding) {
                let [fn, event = "click", time = 300] = binding.value
                let timer, timer_end;
                el.addEventListener(event, () => {
                    if (timer) {
                        clearTimeout(timer_end);
                        return timer_end = setTimeout(() => fn(), time);
                    }
                    fn();
                    timer = setTimeout(() => timer = null, time)
                })
            }
        })
    }
}
//在main.js中引入

import disrective from "./disrective.js"

Vue.use(disrective)