<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='scss'> @import 'app-scroll-container.scss'; </style>