<template> <div :class="curClassName" :style="curStyle"> <template v-if="containerModel.length > 0"> <div v-for="name of containerModel" class="container-item__pos" :style="getItemPosStyle(name)"> <slot :name="name"></slot> </div> </template> </div> </template> <script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component({}) export default class AppStandardContainer extends Vue { /** * 名称 * * @type {string} * @memberof AppStandardContainer */ @Prop() public name!: string; /** * 布局模型详情 * * @type {string} * @memberof AppStandardContainer */ @Prop() public layoutModelDetails: any; /** * 插槽对象 * * @memberof AppStandardContainer */ public containerModel: any[] = []; /** * 组件初始化 * * @memberof SimpleFlexContainer */ public created() { this.initSimpleFlexContainer(); } /** * 初始化SIMPLEFLEX容器 * * @memberof SimpleFlexContainer */ public initSimpleFlexContainer() { const curLayoutModel = this.layoutModelDetails[this.name]; if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) { curLayoutModel.details.forEach((key: string) => { this.containerModel.push(key); }) } } /** * 当前容器样式类 */ get curClassName() { const layoutModel = this.layoutModelDetails[this.name]; return `app-standard-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.getCommonLayoutStyle(); } } </script> <style lang='less'> @import 'app-standard-container.less'; </style>