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="scroll-item__pos" :style="getItemPosStyle(name)">
                <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="scroll-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="scroll-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="scroll-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="scroll-item__pos" :style="getItemPosStyle(name)">
                <slot :name="name"></slot>
            </div>
        </div>
    </div>
</template>

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

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

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

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

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

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

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

    /**
     * 获取项布局样式
     */
    public  getItemPosStyle(name:string){
        const layoutModel = this.layoutModelDetails[name];
        return layoutModel.getBorderLayoutStyle();
    }

    /**
     * 组件初始化
     *
     * @memberof AppScrollContainer
     */
    public created() {
        this.initScrollContainer();
    }

    /**
     * 初始化滚动容器
     *
     * @memberof AppScrollContainer
     */
    public initScrollContainer() {
        let minusHeight = '';
        let minusWidth:string = '';
        const curLayoutModel = this.layoutModelDetails[this.name];
        if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
            curLayoutModel.details.forEach((key: string) => {
                const { name, layoutWidth, widthMode, layoutHeight, heightMode, layoutPos } = this.layoutModelDetails[key];
                const style = {};
                if (layoutWidth) {
                    Object.assign(style, { width: Util.getBoxSize('WIDTH', widthMode, layoutWidth).width });
                    if (layoutPos && (Object.is(layoutPos, 'WEST') || Object.is(layoutPos, 'EAST'))) {
                        minusWidth += ` - ${Util.getBoxSize('WIDTH', widthMode, layoutWidth).width}`;
                    }
                }
                if (layoutHeight) {
                    Object.assign(style, { height: Util.getBoxSize('HEIGHT', heightMode, layoutHeight).height });
                    if (layoutPos && (Object.is(layoutPos, 'NORTH') || Object.is(layoutPos, 'SOUTH'))) {
                        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%';
        }
    }
}
</script>
<style lang='less'>
@import 'app-scroll-container.less';
</style>