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="onChange(splitInfo)" ref="splitter">
<SplitterPanel class="content-box padding-1" v-if="splitInfo.children.length < 1" :style="$createStyleSheet(splitInfo.styleSheet)" :size="100">
<ComponentTitle v-if="splitInfo.useSj" :title="splitInfo.layoutSj" />
<BaseComponent v-if="splitInfo.se == 'component'" :component="splitInfo.component" @onChange="onChange" @Click.stop="onChange(splitInfo)" />
</SplitterPanel>
<template v-else>
<SplitterPanel class="content-box" v-for="(item, idx) of splitInfo.children" :key="idx" :style="$createStyleSheet(splitInfo.styleSheet)" :size="initialSizes[idx]">
<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,
required: true
},
selectLayout: {
type: Object,
default: null
},
},
data() {
return {
initialSizes: [],
isInitialRender: true
};
},
beforeMount() {
this.setInitialSizes();
},
mounted() {
this.$nextTick(() => {
// DOM이 업데이트된 후 실행
this.forceSplitterUpdate();
});
},
methods: {
setInitialSizes() {
// 초기 사이즈 설정
const size1 = Number(this.splitInfo.layout_size1) || 50;
const size2 = Number(this.splitInfo.layout_size2) || 50;
console.log('설정할 사이즈:', size1, size2);
this.initialSizes = [size1, size2];
},
forceSplitterUpdate() {
// DOM에 직접 접근하여 사이즈 강제 설정
try {
const splitterEl = this.$refs.splitter.$el;
if (!splitterEl) return;
const panels = splitterEl.querySelectorAll('.p-splitter-panel');
if (panels.length >= 2) {
const size1 = Number(this.splitInfo.layout_size1) || 50;
const size2 = Number(this.splitInfo.layout_size2) || 50;
// flex-basis 스타일 설정
panels[0].style.flexBasis = `${size1}%`;
panels[1].style.flexBasis = `${size2}%`;
// 필요하다면 splitter 컴포넌트의 메서드를 직접 호출
if (this.$refs.splitter.refresh) {
this.$refs.splitter.refresh();
}
console.log('DOM 직접 조작:', size1, size2);
}
} catch (err) {
console.error('Splitter 초기화 오류:', err);
}
},
updateSizes(event) {
const newSizes = event.sizes || event;
// 상태 업데이트
this.initialSizes = [...newSizes];
// Props 업데이트 (Vue 3에서는 직접 할당 가능)
this.splitInfo.layout_size1 = newSizes[0];
this.splitInfo.layout_size2 = newSizes[1];
console.log('사이즈 업데이트됨:', newSizes);
},
onChange: function (layout) {
this.$emit("onChange", layout);
}
},
// props가 변경될 때 다시 초기화
watch: {
splitInfo: {
handler(newVal) {
if (newVal) {
this.setInitialSizes();
this.$nextTick(() => {
this.forceSplitterUpdate();
});
}
},
deep: true
}
}
};
</script>
<style scoped>
.active {
border: 3px dotted red;
}
.padding-1 {
padding: 1rem;
}
</style>