app-scroll-container.vue

<template>
    <div :class="curClassName" :style="curStyle">
        <div v-if="containerModel.NORTH" :style="containerModel.NORTH.style"
            class="no-style overflow-auto app-scroll-container__header">
            <div v-for="name of containerModel.NORTH.name" class="container-item__pos">
                <slot :name="name"></slot>
            </div>
        </div>
        <div class="app-scroll-container__middle" :style="middleContainerStyle">
            <div v-if="containerModel.WEST" :style="containerModel.WEST.style"
                class="no-style overflow-auto app-scroll-container__left">
                <div v-for="name of containerModel.WEST.name" class="container-item__pos" :style="getItemPosStyle(name)">
                    <slot :name="name"></slot>
                </div>
            </div>
            <div v-if="containerModel.CENTER" :style="containerModel.CENTER.style"
                class="no-style overflow-auto app-scroll-container__center">
                <div v-for="name of containerModel.CENTER.name" class="container-item__pos" :style="getItemPosStyle(name)">
                    <slot :name="name"></slot>
                </div>
            </div>
            <div v-if="containerModel.EAST" :style="containerModel.EAST.style"
                class="no-style overflow-auto app-scroll-container__right">
                <div v-for="name of containerModel.EAST.name" class="container-item__pos" :style="getItemPosStyle(name)">
                    <slot :name="name"></slot>
                </div>
            </div>
        </div>
        <div v-if="containerModel.SOUTH" :style="containerModel.SOUTH.style"
            class="no-style overflow-auto app-scroll-container__bottom">
            <div v-for="name of containerModel.SOUTH.name" class="container-item__pos">
                <slot :name="name"></slot>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Util } from '@/utils';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({})
export default class AppScrollContainer extends Vue {
    /**
     * 名称
     *
     * @type {string}
     * @memberof AppScrollContainer
     */
    @Prop() public name!: string;

    /**
     * 下标
     *
     * @type {number}
     * @memberof AppScrollContainer
     */
    @Prop() public index?: number;

    /**
     * 布局模型详情
     *
     * @type {string}
     * @memberof AppScrollContainer
     */
    @Prop() public layoutModelDetails: any;

    /**
     * 布局模型详情变更
     * @param newVal 
     * @param oldVal 
     */
    @Watch('layoutModelDetails')
    onLayoutModelDetailsChange(newVal: any, oldVal: any) {
        this.initScrollContainer();
    }

    /**
     * 插槽对象
     *
     * @memberof AppScrollContainer
     */
    public containerModel: any = {};

    /**
     * 中间区域样式
     *
     * @memberof AppScrollContainer
     */
    public middleContainerStyle: any = {};

    /**
     * 项名称
     *
     * @type {*}
     * @memberof AppScrollContainer
     */
    get itemName() {
        return (this.index || this.index === 0) ? `${this.name}_${this.index}` : this.name;
    }

    /**
     * 当前容器样式类
     */
    get curClassName() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return `app-scroll-container ${this.itemName} ${layoutModel.sysCss}`;
        }
    }

    /**
     * 当前容器样式
     */
    get curStyle() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.getElementStyle();
        }
    }

    /**
     * 初始化滚动容器
     *
     * @memberof AppScrollContainer
     */
    public initScrollContainer() {      
        let minusHeight = '';
        let minusWidth: string = '';
        this.containerModel = {};
        const curLayoutModel = this.layoutModelDetails[this.itemName];
        if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
            curLayoutModel.details.forEach((key: string) => {
                let childModelDetail: any;
                if (this.index || this.index === 0) {
                    childModelDetail = this.layoutModelDetails[`${key}_${this.index}`];
                } else {
                    childModelDetail = this.layoutModelDetails[key];
                }
                if (childModelDetail) {
                    const { name, layoutWidth, widthMode, layoutHeight, heightMode, layoutPos } = childModelDetail;
                    const style = {};
                    if (layoutWidth) {
                        if (layoutPos && (Object.is(layoutPos, 'WEST') || Object.is(layoutPos, 'EAST'))) {
                            Object.assign(style, { width: Util.getBoxSize('WIDTH', widthMode, layoutWidth).width });
                            minusWidth += ` - ${Util.getBoxSize('WIDTH', widthMode, layoutWidth).width}`;
                        }
                    }
                    if (layoutHeight) {
                        if (layoutPos && (Object.is(layoutPos, 'NORTH') || Object.is(layoutPos, 'SOUTH'))) {
                            Object.assign(style, { height: Util.getBoxSize('HEIGHT', heightMode, layoutHeight).height });
                            minusHeight += ` - ${Util.getBoxSize('HEIGHT', heightMode, layoutHeight).height}`;
                        }
                    }
                    if (this.containerModel.hasOwnProperty(layoutPos)) {
                        Object.assign(this.containerModel[layoutPos], { style });
                        this.containerModel[layoutPos].name.push(name);
                    } else {
                        this.containerModel[layoutPos] = { style, name: [name] };
                    }
                }
            });
        }
        this.middleContainerStyle.height = minusHeight ? `calc(100%${minusHeight})` : '100%';
        if (this.containerModel.CENTER) {
            this.containerModel.CENTER.style.width = minusWidth ? `calc(100%${minusWidth})` : '100%';
        }
    }

    /**
     *  获取项布局样式
     */
    public getItemPosStyle(name: string) {
        const itemName = (this.index || this.index === 0) ? `${name}_${this.index}` : name;
        let layoutModel = this.layoutModelDetails[itemName];
        if (layoutModel) {
            const childBoxSizeStyle: any = layoutModel.getBoxSizeStyle();
            const boxSizeStyle: any = {};
            if (!childBoxSizeStyle.width) {
                Object.assign(boxSizeStyle, { 'width': '100%' });
            }
            if (!childBoxSizeStyle.height) {
                Object.assign(boxSizeStyle, { 'height': '100%' });
            } else {
                Object.assign(boxSizeStyle, { 'display': 'contents' });
            }
            if (!layoutModel.visible) {
                Object.assign(boxSizeStyle, { display: 'none' })
            }
            return boxSizeStyle;
        }
    }
}
</script>
<style lang='less'>
@import 'app-scroll-container.less';
</style>