Code - kwha/Taken_BI_Manager

<template> <Splitter :id="splitInfo['layoutNm']" class="mb-5" :layout="splitInfo['layoutType']" @resize="updateSizes" :resizable="true" > <SplitterPanel :id="splitInfo['children'][0]['layoutNm']" class="flex align-items-center justify-content-center" :class="{ active: clickElement == splitInfo['children'][0]['layoutNm'] && splitInfo['children'][0], 'padding-1': splitInfo['children'][0]['componentNm'] != null, }" :size="splitInfo['sizes'][0]" >  <SplitterLayout v-if=" splitInfo['children'][0]['children'] !== null && splitInfo['children'][0]['children'].length > 0 " :is="SplitterLayout" :splitInfo="splitInfo['children'][0]['children'][0]" :clickElement="clickElement" :optionChangeClick="optionChangeClick" :componentOptn="componentOptn" @parentInfo="parentInfo" ></SplitterLayout>   <component v-if="splitInfo['children'][0]['componentNm']" :is="splitInfo['children'][0]['componentNm']" :parent="splitInfo['children'][0]" :optionChangeClick="optionChangeClick" :componentOptn="componentOptn" @parentInfo="parentInfo" > </component>  </SplitterPanel> <SplitterPanel v-if="splitInfo['children'][0]['layoutNm'] !== undefined" :id="splitInfo['children'][1]['layoutNm']" class="flex align-items-center justify-content-center" :class="{ active: clickElement == splitInfo['children'][1]['layoutNm'] && splitInfo['children'][1], 'padding-1': splitInfo['children'][1]['componentNm'] != null, }" :size="splitInfo['sizes'][1]" >  <SplitterLayout v-if=" splitInfo['children'][0]['children'] !== null && splitInfo['children'][0]['children'].length > 0 " :is="SplitterLayout" :splitInfo="splitInfo['children'][1]['children'][0]" :clickElement="clickElement" :optionChangeClick="optionChangeClick" :componentOptn="componentOptn" @parentInfo="parentInfo" ></SplitterLayout> <component v-if="splitInfo['children'][1]['componentNm']" :is="splitInfo['children'][1]['componentNm']" :parent="splitInfo['children'][1]" :optionChangeClick="optionChangeClick" :componentOptn="componentOptn" @parentInfo="parentInfo" ></component> </SplitterPanel> </Splitter> </template> <script> import HorizentalThreeData from "./elementComponent/HorizentalThreeData.vue"; import HorizentalTwoData from "./elementComponent/HorizentalTwoData.vue"; import TableData from "./elementComponent/TableData.vue"; import ThreeData from "./elementComponent/ThreeData.vue"; import EquipmentData from "./elementComponent/EquipmentData.vue"; // 2024.02.16 PJH export default { name: "SplitterLayout", props: { splitInfo: { type: Object, }, clickElement: null, optionChangeClick: { type: Function, }, componentOptn: { type: Object, required: true, }, inputVal: { type: Object, required: true, }, }, components: { HorizentalThreeData, HorizentalTwoData, TableData, ThreeData, EquipmentData, // 2024.02.16 PJH SplitterLayout: () => import("./SplitterLayout.vue"), }, methods: { // newSizes는 사용자가 조정한 후의 panel 크기 비율을 배열로 제공합니다. updateSizes(newSizes) { this.splitInfo["sizes"] = newSizes["sizes"]; }, parentInfo: function (parentInfo) { this.$emit("parentInfo", parentInfo); }, }, computed: { isReSize() { return this.$route.path.includes("customSelectOne") ? false : true; }, }, }; </script> <style scoped> .active { border: 3px dotted red; } .padding-1 { padding: 1rem; } .p-splitter-gutter-handle, .p-splitter-gutter { pointer-events: none; } </style>