File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<Splitter :class="{ 'content-box': true, active: !$isEmpty(selectLayout) && splitInfo.layout_nm == selectLayout.layout_nm }" :layout="splitInfo.layout_type" @resizeend="updateSizes" @Click.stop="clickLayout(splitInfo)">
<SplitterPanel class="content-box padding-1" v-if="splitInfo.children.length < 1" :style="$createStyleSheet(splitInfo.styleSheet)">
<ComponentTitle v-if="splitInfo.useSj" :title="splitInfo.layoutSj" />
<BaseComponent v-else-if="splitInfo.se == 'component'" :component="splitInfo.component" @onChange="onChange" @Click.stop="clickLayout(splitInfo)" />
</SplitterPanel>
<template v-else>
<SplitterPanel class="content-box" v-for="(item, idx) of splitInfo.children" :key="idx" :style="$createStyleSheet(splitInfo.styleSheet)">
<SplitterLayout :splitInfo="item" :selectLayout="selectLayout" @onChange="onChange" />
</SplitterPanel>
</template>
</Splitter>
</template>
<script>
import BaseComponent from "./elementComponent/BaseComponent.vue";
import ComponentTitle from './elementComponent/ComponentTitle.vue';
export default {
name: "SplitterLayout",
components: { BaseComponent, ComponentTitle },
props: {
splitInfo: {
type: Object,
},
selectLayout: {
type: Object,
},
},
methods: {
updateSizes(newSizes) {
this.splitInfo["layout_size1"] = newSizes.sizes[0];
this.splitInfo["layout_size2"] = newSizes.sizes[1];
this.splitInfo["sizes"] = newSizes.sizes;
},
clickLayout: function (splitInfo) {
this.$emit("onChange", splitInfo);
},
onChange: function (layout) {
this.$emit("onChange", layout);
},
},
};
</script>
<style scoped>
.active {
border: 3px dotted red;
}
.padding-1 {
padding: 1rem;
}
</style>