<template> <div :class="className"> <div> <slot></slot> </div> <div :style=style> <slot name="propertypanel"></slot> </div> </div> </template> <script lang="ts"> import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator'; @Component({}) export default class PropertyLayout extends Vue { @Prop() public propertyType?: string; @Prop() public width?: string; @Prop() public height?: string; public className: string = ''; public style: any; mounted(){ let _className = 'top-and-bottom'; let _style: any = {}; _style.minWidth = this.width ? this.width + 'px' : ''; _style.maxWidth = this.width ? this.width + 'px' : ''; _style.minHeight = this.height ? this.height + 'px' : ''; _style.maxHeight = this.height ? this.height + 'px' : ''; if(Object.is(this.propertyType, 'RIGHT')) { _className = 'left-and-right'; } this.style = _style; this.className = _className; } } </script> <style lang='scss'> @import './property-layout.scss'; </style>