Merge pull request #542 from ielgnaw/staging

feat: bump to 2.5.9-beta.27
TencentBlueKing · May 24, 2024 · a7ea270 · a7ea270
2 parents e91004c + dd6d6e6
commit a7ea270
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 13 deletions.
diff --git a/example/components/changelog/readme.md b/example/components/changelog/readme.md
@@ -8,6 +8,12 @@
 
 <div class="changelog-wrapper">
 
+### 2.5.9-beta.27 {page=#/changelog}
+
+* **[fix]**:
+    - [ResizeLayout 可拉伸布局](#/resize-layout) 修复 resize-layout 组件 aside slot 中重新渲染导致无法 collapse 的问题
+
+
 ### 2.5.9-beta.26 {page=#/changelog}
 
 * **[fix]**:

diff --git a/example/components/resize-layout/example.vue b/example/components/resize-layout/example.vue
@@ -39,6 +39,13 @@
       <div slot="aside">aside</div>
       <div slot="main">main</div>
     </bk-resize-layout>
+
+    <!-- <bk-resize-layout collapsible :initial-divide="20" :max="420" style="height: 500px;" :auto-minimize="true" @collapse-change="handleCollapseChange">
+      <template #aside>
+        {{sss}}
+      </template>
+      <template #main>main</template>
+    </bk-resize-layout> -->
   </div>
 </template>
 
@@ -53,13 +60,20 @@ export default {
   data () {
     return {
       disabled: false,
-      min: 100
+      min: 100,
+      max: 400,
+      sss: 'dddd'
     }
   },
   methods: {
     handleResizing (height) {
       console.log(height)
       this.disabled = (height - 3) <= this.min
+    },
+
+    handleCollapseChange (v) {
+      this.sss = +new Date()
+      console.error(v)
     }
   }
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bk-magic-vue",
-  "version": "2.5.9-beta.26",
+  "version": "2.5.9-beta.27",
   "description": "基于蓝鲸 Magicbox 和 Vue 的前端组件库",
   "main": "dist/bk-magic-vue.min.js",
   "files": [

diff --git a/src/components/resize-layout/resize-layout.vue b/src/components/resize-layout/resize-layout.vue
@@ -59,8 +59,8 @@
 </template>
 
 <script>
-import { throttle } from 'throttle-debounce'
 import { addResizeListener, removeResizeListener } from '@/utils/resize-events'
+import { throttle } from 'throttle-debounce'
 export default {
   name: 'bk-resize-layout',
   props: {
@@ -115,6 +115,7 @@ export default {
       asideContentVisible: true,
       minimized: false,
       limitMax: null,
+      asideStyleValue: null,
       state: {}
     }
   },
@@ -126,12 +127,15 @@ export default {
       return this.vertical ? 'width' : 'height'
     },
     computedAsideStyle () {
-      let divide = this.initialDivide
-      if (typeof divide === 'number') {
-        divide = `${divide}px`
+      let asideStyleValue = ''
+      // 兼容 '20' 的情况
+      if (typeof this.asideStyleValue !== 'number' && isNaN(this.asideStyleValue)) {
+        asideStyleValue = this.asideStyleValue
+      } else {
+        asideStyleValue = `${this.asideStyleValue}px`
       }
       return {
-        [this.computedStyleKey]: divide
+        [this.computedStyleKey]: asideStyleValue
       }
     },
     computedTriggerStyle () {
@@ -148,6 +152,17 @@ export default {
       return 0
     }
   },
+  watch: {
+    initialDivide: {
+      handler: function (newValue, _oldValue) {
+        this.asideStyleValue = newValue
+      },
+      immediate: true
+    }
+  },
+  created () {
+    this.asideStyleValue = this.initialDivide
+  },
   mounted () {
     this.setupLimit()
     addResizeListener(this.$el, this.setupLimit)
@@ -235,6 +250,7 @@ export default {
           const current = this.state.aside[this.computedStyleKey] + delta
           const realValue = this.getRealValue(current) + this.triggerOffset
           const pixel = `${realValue}px`
+          this.asideStyleValue = pixel
           if (this.immediate) {
             aside.style[this.computedStyleKey] = pixel
           } else {
@@ -251,6 +267,9 @@ export default {
         document.removeEventListener('mouseup', handleMouseUp)
         document.onselectstart = null
         document.ondragstart = null
+
+        this.asideStyleValue = resizeProxy.style[placement]
+
         this.$nextTick(() => {
           this.setupAutoMinimize()
           this.$emit('after-resize', parseFloat(resizeProxy.style[placement], 10))
@@ -259,7 +278,6 @@ export default {
           return false
         }
         aside.style[this.computedStyleKey] = resizeProxy.style[placement]
-        console.error('mouseup', aside.style[this.computedStyleKey])
       }
       document.addEventListener('mousemove', handleMouseMove)
       document.addEventListener('mouseup', handleMouseUp)
@@ -276,9 +294,18 @@ export default {
         this.asideContentVisible = true
         return false
       }
+
+      const prevDataWidthAttr = aside.getAttribute(`data-${this.computedStyleKey}`)
+      const prevDataWidth = (prevDataWidthAttr && `${parseFloat(prevDataWidthAttr)}px`) || this.initialDivide
+
       this.setupAsideAnimation()
+
+      // collapsed 后，this.computedAsideStyle[this.computedStyleKey] 就变成 0 了
       this.$nextTick(() => {
-        aside.setAttribute(`data-${this.computedStyleKey}`, this.computedAsideStyle[this.computedStyleKey])
+        aside.setAttribute(
+          `data-${this.computedStyleKey}`,
+          prevDataWidth
+        )
       })
     },
     setCollapse (collapsed) {
@@ -288,14 +315,14 @@ export default {
     },
     setupAsideAnimation () {
       const aside = this.$refs.aside
-      const asideRect = aside.getBoundingClientRect()
+      const previewStyleValue = aside.style[this.computedStyleKey]
       this.setupAsideListener(!this.collapsed)
       if (this.collapsed) {
-        aside.setAttribute(`data-${this.computedStyleKey}`, asideRect[this.computedStyleKey] + 'px')
-        aside.style[this.computedStyleKey] = this.collapsible ? '0' : '5px'
+        aside.setAttribute(`data-${this.computedStyleKey}`, previewStyleValue)
+        this.asideStyleValue = this.collapsible ? '0' : '5px'
       } else {
         this.asideContentVisible = true
-        aside.style[this.computedStyleKey] = aside.getAttribute(`data-${this.computedStyleKey}`)
+        this.asideStyleValue = aside.getAttribute(`data-${this.computedStyleKey}`)
       }
     },
     setupAsideListener (asideContentVisible) {