fix: 🐛 修复Collapse折叠面板组件内容溢出问题 (#710)

Author: Gahotx

src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts

@@ -31,6 +31,11 @@ export type CollapseItemExpose = {
    * @returns boolean
    */
   getExpanded: () => boolean
+  /**
+   * 更新展开状态
+   * @returns Promise<void>
+   */
+  updateExpand: () => Promise<void>
 }
 
 export type CollapseItemInstance = ComponentPublicInstance<CollapseItemProps, CollapseItemExpose>

src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue

@@ -74,25 +74,11 @@ const selected = computed(() => {
   }
 })
 
-watch(
-  () => selected.value,
-  () => {
-    if (!inited.value) {
-      return
-    }
-    updateExpend()
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
-
 onMounted(() => {
-  updateExpend()
+  updateExpand()
 })
 
-function updateExpend() {
+function updateExpand() {
   return getRect(`#${collapseId.value}`, false, proxy).then((rect) => {
     const { height: rectHeight } = rect
     height.value = isDef(rectHeight) ? Number(rectHeight) : ''
@@ -136,24 +122,29 @@ function handleClick() {
       }
       if (isPromise(response)) {
         response.then(() => {
-          collapse && collapse.toggle(name, !expanded.value)
+          handleChangeExpand(name)
         })
       } else {
-        collapse && collapse.toggle(name, !expanded.value)
+        handleChangeExpand(name)
       }
     } else {
-      collapse && collapse.toggle(name, !expanded.value)
+      handleChangeExpand(name)
     }
   } else {
-    collapse && collapse.toggle(name, !expanded.value)
+    handleChangeExpand(name)
   }
 }
 
 function getExpanded() {
   return expanded.value
 }
 
-defineExpose<CollapseItemExpose>({ getExpanded })
+function handleChangeExpand(name: string) {
+  updateExpand()
+  collapse && collapse.toggle(name, !expanded.value)
+}
+
+defineExpose<CollapseItemExpose>({ getExpanded, updateExpand })
 </script>
 
 <style lang="scss" scoped>

src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue

@@ -126,6 +126,7 @@ const toggleAll = (options: boolean | CollapseToggleAllOptions = {}) => {
         names.push(item.name || index)
       }
     } else {
+      item.$.exposed!.updateExpand()
       if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
         names.push(item.name || index)
       }