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
v-if="splitInfo['children'].length <= 0"
:id="splitInfo['layout_nm']"
class="mb-5"
:layout="splitInfo['layout_type']"
@resizeend="updateSizes"
@Click.stop="clickLayout(splitInfo)"
:style="this.$createStyleSheet(splitInfo.styleSheet)"
>
<SplitterPanel
v-if="splitInfo['children'][0] != null"
class="flex align-items-center justify-content-center"
:size="50"
>
11
</SplitterPanel>
<SplitterPanel
v-if="splitInfo['children'][1] != null"
class="flex align-items-center justify-content-center"
:size="50"
>
22
</SplitterPanel>
<BaseComponent
v-if="splitInfo.se == 'component'"
:component="splitInfo.component"
@changeselectLayout="changeselectLayout"
@Click.stop="clickLayout(splitInfo)"
></BaseComponent>
</Splitter>
<Splitter
v-else
:id="splitInfo['layout_nm']"
class="mb-5"
:layout="splitInfo['layout_type']"
@resizeend="updateSizes"
@Click.stop="clickLayout(splitInfo)"
:style="this.$createStyleSheet(splitInfo.styleSheet)"
>
<SplitterPanel
v-if="splitInfo['children'][0] != null"
:id="splitInfo['children'][0]['layout_nm']"
class="flex align-items-center justify-content-center"
:class="{
active:
selectLayout['layout_nm'] == splitInfo['children'][0]['layout_nm'] &&
splitInfo['children'][0],
'padding-1': splitInfo['children'][0]['component'] != null,
}"
:size="splitInfo['layout_size1']"
>
<template v-if="splitInfo.children[0]">
<SplitterLayout
v-if="splitInfo.children[0].se == 'splitter'"
:splitInfo="splitInfo.children[0]"
@changeselectLayout="changeselectLayout"
:selectLayout="selectLayout"
></SplitterLayout>
<BaseComponent
v-if="splitInfo.children[0].se == 'component'"
:component="splitInfo.children[0].component"
@changeselectLayout="changeselectLayout"
@Click.stop="clickLayout(splitInfo.children[0])"
></BaseComponent>
</template>
</SplitterPanel>
<SplitterPanel
v-if="splitInfo['children'][1] != null"
:id="splitInfo['children'][1]['layout_nm']"
class="flex align-items-center justify-content-center"
:class="{
active:
selectLayout['layout_nm'] == splitInfo['children'][1]['layout_nm'] &&
splitInfo['children'][1],
'padding-1': splitInfo['children'][1]['component'] != null,
}"
:size="splitInfo['layout_size2']"
>
<template v-if="splitInfo.children[1]">
<SplitterLayout
v-if="splitInfo.children[1].se == 'splitter'"
:splitInfo="splitInfo.children[1]"
@changeselectLayout="changeselectLayout"
:selectLayout="selectLayout"
></SplitterLayout>
<BaseComponent
v-if="splitInfo.children[1].se == 'component'"
:component="splitInfo.children[1].component"
@changeselectLayout="changeselectLayout"
@Click.stop="clickLayout(splitInfo.children[1])"
></BaseComponent>
</template>
</SplitterPanel>
</Splitter>
</template>
<script>
import BaseComponent from "./elementComponent/BaseComponent.vue";
export default {
name: "SplitterLayout",
props: {
splitInfo: {
type: Object,
},
selectLayout: {
type: Object,
default: function () {
return {
layout_nm: "",
layout_type: "",
children: [],
};
},
},
createChartData: {
type: Object,
},
},
data() {
return {
currentSelectLayout: this.selectLayout,
};
},
components: {
BaseComponent: BaseComponent,
},
methods: {
updateSizes(newSizes) {
// newSizes는 사용자가 조정한 후의 panel 크기 비율을 배열로 제공합니다.
this.splitInfo["layout_size1"] = newSizes.sizes[0];
this.splitInfo["layout_size2"] = newSizes.sizes[1];
this.splitInfo["sizes"] = newSizes.sizes;
},
parentInfo: function (parentInfo) {
this.$emit("parentInfo", parentInfo);
},
clickLayout: function (splitInfo) {
this.$emit("changeselectLayout", splitInfo);
},
changeselectLayout: function (layout) {
this.$emit("changeselectLayout", layout);
},
},
watch: {
splitInfo: {
handler: function (newVal, oldVal) {},
deep: true,
},
selectLayout: {
handler: function (v, old) {
this.currentSelectLayout = v;
},
deep: true,
},
},
};
</script>
<style scoped>
.active {
border: 3px dotted red;
}
.padding-1 {
padding: 1rem;
}
</style>