From 5d6825cfedcb4a9c28f43237b38ff33d5cdf5220 Mon Sep 17 00:00:00 2001
From: Jecyu <jecyu.lin@gmail.com>
Date: Sun, 5 Dec 2021 11:13:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(splitter):=20=E4=BF=AE=E5=A4=8D=20splitter?=
 =?UTF-8?q?=20=E5=9C=A8=E6=B5=8F=E8=A7=88=E5=99=A8=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E5=90=8E=E6=8B=96=E6=8B=BD=E5=88=86=E5=89=B2=E7=BA=BF=E8=B7=B3?=
 =?UTF-8?q?=E5=8A=A8=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-vue/devui/splitter/src/splitter.tsx | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/devui-vue/devui/splitter/src/splitter.tsx b/packages/devui-vue/devui/splitter/src/splitter.tsx
index 49abaf38..4f3eabdb 100644
--- a/packages/devui-vue/devui/splitter/src/splitter.tsx
+++ b/packages/devui-vue/devui/splitter/src/splitter.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, reactive, ref, provide, nextTick, watch } from 'vue'
+import { defineComponent, reactive, ref, provide, onMounted, onUnmounted, watch } from 'vue'
 import { splitterProps, SplitterProps } from './splitter-types'
 import DSplitterBar from './splitter-bar'
 import { SplitterStore } from './splitter-store'
@@ -7,14 +7,14 @@ import './splitter.scss'
 export default defineComponent({
   name: 'DSplitter',
   components: {
-    DSplitterBar,
+    DSplitterBar
   },
   props: splitterProps,
   emits: [],
   setup(props: SplitterProps, ctx) {
     const store: SplitterStore = new SplitterStore()
     const state = reactive({
-      panes: [], // 内嵌面板
+      panes: [] // 内嵌面板
     })
 
     state.panes = ctx.slots.DSplitterPane?.() || []
@@ -24,17 +24,28 @@ export default defineComponent({
     provide('splitterStore', store)
 
     const domRef = ref<HTMLElement>()
-    watch(domRef, (ele) => {
-      if (!ele) {
-        return;
-      }
+    const refreshSplitterContainerSize = () => {
+      if (!domRef) return
       let containerSize = 0
       if (props.orientation === 'vertical') {
-        containerSize = ele.clientHeight
+        containerSize = domRef.value.clientHeight
       } else {
-        containerSize = ele.clientWidth
+        containerSize = domRef.value.clientWidth
       }
       store.setSplitter({ containerSize })
+    }
+
+    const observer = new ResizeObserver(refreshSplitterContainerSize)
+    watch(domRef, (ele) => {
+      if (!ele) {
+        return
+      }
+      refreshSplitterContainerSize()
+      observer.observe(domRef.value)
+    })
+
+    onUnmounted(() => {
+      observer.disconnect()
     })
 
     return () => {
@@ -61,5 +72,5 @@ export default defineComponent({
         </div>
       )
     }
-  },
+  }
 })
-- 
Gitee