feat: ✨ Collapse 折叠面板组件支持嵌套使用 (#521)

✅ Closes: #503

Author: Moonofweisheng

src/pages/collapse/Index.vue

@@ -1,9 +1,11 @@
 <template>
   <page-wraper>
     <wd-toast></wd-toast>
-    <demo-block title="基础用法" transparent>
-      <wd-button @click="collapse?.toggleAll()">toggleAll</wd-button>
 
+    <demo-block title="toggleAll" transparent>
+      <wd-button @click="collapse?.toggleAll()">toggleAll</wd-button>
+    </demo-block>
+    <demo-block title="基础用法" transparent>
       <wd-collapse ref="collapse" v-model="value1" @change="handleChange1">
         <wd-collapse-item
           v-for="(item, index) in itemList"
@@ -55,6 +57,19 @@
         <wd-collapse-item title="标签3" name="item3">这是一条简单的示例文字。</wd-collapse-item>
       </wd-collapse>
     </demo-block>
+
+    <demo-block title="嵌套" transparent>
+      <wd-collapse v-model="collapseRoot" @change="handleChange1">
+        <wd-collapse-item v-for="item in 5" :key="item" :title="`标签${item}`" :name="`${item}`">
+          <wd-collapse v-model="collapseList[item - 1]">
+            <wd-collapse-item v-for="(item, index) in itemList" :key="index" :title="item.title" :name="item.name">
+              {{ item.body }}
+            </wd-collapse-item>
+          </wd-collapse>
+        </wd-collapse-item>
+      </wd-collapse>
+    </demo-block>
+
     <demo-block title="查看更多" transparent>
       <wd-collapse viewmore v-model="value4" @change="handleChange4">
         这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。这是一条简单的示例文字。
@@ -120,7 +135,33 @@ const value6 = ref<boolean>(false)
 const value7 = ref<string[]>(['item1'])
 const desc7 = '如订单处于暂停状态，进入“我的订单”页面，找到要取消的订单，点击“取消订单”按钮；选择订单取消原因后，点击“下一步”提交申请即可。'
 const accordion = ref<boolean>(true)
-const name = ref<string>('item1')
+
+const collapseRoot = ref<string[]>(['0'])
+const collapseList = ref<Array<string[]>>([['item1'], ['item2'], ['item3'], ['item4'], ['item5']])
+
+function handleChange1({ value }: any) {
+  console.log(value)
+}
+function handleChange2({ value }: any) {
+  console.log(value)
+}
+function handleChange3({ value }: any) {
+  console.log(value)
+}
+function handleChange4({ value }: any) {
+  console.log(value)
+}
+function handleChange5({ value }: any) {
+  console.log(value)
+}
+function handleChange6({ value }: any) {
+  console.log(value)
+}
+function handleChange7({ value }: any) {
+  console.log(value)
+}
+
+/**
 
 function handleChange1({ value }: any) {
   console.log(value)

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

@@ -60,7 +60,6 @@
 
   @include e(wrapper) {
     position: relative;
-    transition: height 0.3s ease-in-out;
     overflow: hidden;
     will-change: height;
   }

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

@@ -6,8 +6,8 @@
         <wd-icon name="arrow-down" :custom-class="`wd-collapse-item__arrow ${expanded ? 'is-retract' : ''}`" />
       </slot>
     </view>
-    <view class="wd-collapse-item__wrapper" :style="contentStyle">
-      <view class="wd-collapse-item__body">
+    <view class="wd-collapse-item__wrapper" :style="contentStyle" @transitionend="handleTransitionEnd">
+      <view class="wd-collapse-item__body" :id="collapseId">
         <slot />
       </view>
     </view>
@@ -25,23 +25,21 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
-import { getRect, isArray, isDef, isPromise, objToStyle } from '../common/util'
+import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue'
+import { addUnit, getRect, isArray, isDef, isPromise, objToStyle, requestAnimationFrame, uuid } from '../common/util'
 import { useParent } from '../composables/useParent'
 import { COLLAPSE_KEY } from '../wd-collapse/types'
 import { collapseItemProps, type CollapseItemExpose } from './types'
 
-const $body = '.wd-collapse-item__body'
+const collapseId = ref<string>(`collapseId${uuid()}`)
 
 const props = defineProps(collapseItemProps)
 
 const { parent: collapse, index } = useParent(COLLAPSE_KEY)
 
 const height = ref<string | number>('')
-
+const inited = ref<boolean>(false)
 const expanded = ref<boolean>(false)
-
-const transD = ref<string>('0.3s')
 const { proxy } = getCurrentInstance() as any
 
 /**
@@ -55,9 +53,14 @@ const isFirst = computed(() => {
  * 容器样式，(动画)
  */
 const contentStyle = computed(() => {
-  let style: Record<string, string> = {
-    height: expanded.value ? height.value + 'px' : '0px',
-    'transition-duration': transD.value
+  const style: CSSProperties = {}
+  if (inited.value) {
+    style.transition = 'height 0.3s ease-in-out'
+  }
+  if (!expanded.value) {
+    style.height = '0px'
+  } else if (height.value) {
+    style.height = addUnit(height.value)
   }
   return objToStyle(style)
 })
@@ -72,21 +75,11 @@ const selected = computed(() => {
 
 watch(
   () => selected.value,
-  (newVal) => {
-    const name = props.name
-    if (isDef(newVal)) {
-      if (typeof newVal === 'string' && newVal === name) {
-        doResetHeight($body)
-        expanded.value = true
-      } else if (isArray(newVal) && newVal.indexOf(name as string) >= 0) {
-        doResetHeight($body)
-        expanded.value = true
-      } else {
-        expanded.value = false
-      }
-    } else {
-      expanded.value = false
+  () => {
+    if (!inited.value) {
+      return
     }
+    updateExpend()
   },
   {
     deep: true,
@@ -95,29 +88,40 @@ watch(
 )
 
 onMounted(() => {
-  init()
+  updateExpend()
 })
 
-/**
- * 初始化将组件信息注入父组件
- */
-function init() {
-  doResetHeight($body)
-}
-
-/**
- * 控制折叠面板滚动
- * @param {String} select 选择器名称
- * @param {Boolean} firstRender 是否首次渲染
- */
-function doResetHeight(select: string) {
-  getRect(select, false, proxy).then((rect) => {
-    if (!rect) return
+function updateExpend() {
+  return getRect(`#${collapseId.value}`, false, proxy).then((rect) => {
     const { height: rectHeight } = rect
-    height.value = Number(rectHeight)
+    height.value = isDef(rectHeight) ? Number(rectHeight) : ''
+    const name = props.name
+    requestAnimationFrame(() => {
+      if (isDef(selected.value)) {
+        if (
+          (typeof selected.value === 'string' && selected.value === name) ||
+          (isArray(selected.value) && selected.value.indexOf(name as string) >= 0)
+        ) {
+          expanded.value = true
+        } else {
+          expanded.value = false
+        }
+      } else {
+        expanded.value = false
+      }
+      if (!inited.value) {
+        inited.value = true
+      }
+    })
   })
 }
 
+function handleTransitionEnd() {
+  if (expanded.value) {
+    height.value = ''
+  }
+}
+
 // 点击子项
 function handleClick() {
   if (props.disabled) return