app-style2-footer.tsx 2.0 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
import { Vue, Component } from 'vue-property-decorator';
import { VNode, CreateElement } from 'vue';
import { FooterItemsService } from '../../../../app-service';
import { Subscription } from 'rxjs';

/**
 * 应用头部
 *
 * @export
 * @class AppStyle2Footer
 * @extends {Vue}
 */
@Component({})
export class AppStyle2Footer extends Vue {
    /**
     * 底部项绘制服务
     *
     * @private
     * @memberof AppStyle2Footer
     */
    private footerItemsService = new FooterItemsService();

    /**
     * @description 组件事件
     * @type {(Subscription | undefined)}
     * @memberof AppStyle2Footer
     */
    public footerEvent: Subscription | undefined;

    /**
     * 组件创建完毕
     *
     * @memberof AppStyle2Footer
     */
    public created(): void {
        this.footerEvent = this.footerItemsService.tickTrigger().subscribe(() => {
            this.$nextTick();
        });
    }

    public destroyed() {
        if (this.footerEvent) {
            this.footerEvent.unsubscribe();
        }
    }

    /**
     * 绘制内容
     *
     * @returns {VNode}
     * @memberof AppStyle2Footer
     */
    public render(h: CreateElement): VNode {
        return (
            <div class="app-style2-footer">
                <div class="app-style2-footer__left">
                    {this.footerItemsService.leftItemsRenders.map((item) => {
                        return <div class="app-style2-footer__item">{item(h)}</div>;
                    })}
                </div>
                <div class="app-style2-footer__content">
                    {this.footerItemsService.centerItemsRenders.map((item) => {
                        return <div class="app-style2-footer__item">{item(h)}</div>;
                    })}
                </div>
                <div class="app-style2-footer__right">
                    {this.footerItemsService.rightItemsRenders.map((item) => {
                        return <div class="app-style2-footer__item">{item(h)}</div>;
                    })}
                </div>
            </div>
        );
    }
}