tab-offset.tsx 2.1 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
import { VNode } from 'vue';

/**
 * 分页偏移指令
 *
 * @export
 * @class TabOffset
 */
export const TabOffset: any = {

    /**
     * 指令更新
     *
     * @param {HTMLDivElement} el
     * @param {*} binding
     * @param {VNode} vNode
     * @param {VNode} oldVNode
     */
    componentUpdated(el: HTMLDivElement, binding: any, vNode: VNode, oldVNode: VNode) {
        bc.update(el, binding);
    },
};

/**
 * 分页偏移控制器
 *
 * @export
 * @class TabOffsetController
 */
export class TabOffsetController {
    /**
     * 唯一实例
     *
     * @private
     * @static
     * @memberof TabOffsetControllerController
     */
    private static readonly instance = new TabOffsetController();

    /**
     * @description 偏移
     * @protected
     * @type {number}
     * @memberof TabOffsetController
     */
    protected offset: number = 0;

    /**
     * @description 间隔
     * @protected
     * @type {number}
     * @memberof TabOffsetController
     */
    protected gap: number = 0;

    /**
     * 创建实列
     * @memberof TabOffsetControllerController
     */
    private constructor() {
        if (TabOffsetController.instance) {
            return TabOffsetController.instance;
        }
    }

    /**
     * 更新
     *
     * @param {HTMLDivElement}
     * @param {any}
     * @memberof TabOffsetController
     */
    public update(el: HTMLDivElement, binding: any): void {
        this.offset = el.offsetWidth;
        const data = binding.value;
        this.gap = data.gap;
        if (data && data.root && data.root.$el) {
            const source = data.root.$el.querySelector(`.${data.targetClass}`);
            if (source) {
                source.style.paddingLeft = `${this.offset + this.gap}px`;
            }
        }
    }

    /**
     * 获取唯一实例
     *
     * @static
     * @returns {TabOffsetController}
     * @memberof TabOffsetController
     */
    public static getInstance(): TabOffsetController {
        return TabOffsetController.instance;
    }
}

// 导出服务
export const bc: TabOffsetController = TabOffsetController.getInstance();