装饰器语法的工具函数 [VUE] + TS 持续更新中

1. 处理点击指定元素之外的工具，推荐在mounted及以后的生命周期中执行

/**
 * [装饰器]处理点击指定元素之外的工具，推荐在mounted及以后的生命周期中执行
 * @param offscaleElRef 指定元素的ref值
 */
export function ClickOutside(offscaleElRef: string): any {
    return (
        target: Object,
        propertyKey: string,
        propertyDecorator: PropertyDescriptor
    ): PropertyDescriptor => {
        const methods = propertyDecorator.value;
        propertyDecorator.value = function(this: any, ...args: any): void {
            const offscaleEl = this.$refs[offscaleElRef];
            if (offscaleEl && offscaleEl.contains) {
                document.addEventListener('click', event => {
                    if (!event || !event.target) return;
                    const clickEl = event.target as HTMLElement;
                    const clickSelf = offscaleEl.contains(clickEl);
                    if (!clickSelf) {
                        methods.call(this, ...args);
                    }
                });
            }
        };
        return propertyDecorator;
    };
}

2. 防抖动函数

/**
 * [装饰器]防止抖动
 * @param delay 延迟
 */
export function Debounce(delay = 300): any {
    return (
        target: Object,
        propertyKey: string,
        propertyDecorator: PropertyDescriptor
    ): PropertyDescriptor => {
        const methods = propertyDecorator.value;
        let timer: number | null = null;
        propertyDecorator.value = function(...args: any): void {
            timer && clearTimeout(timer);
            timer = setTimeout(methods.bind(this, ...args), delay);
        };
        return propertyDecorator;
    };
}