抽离封装虚拟折叠组件说明

web/src/components/VirtualCollapsePanel/index.vue

@@ -37,7 +37,8 @@
     </DynamicScroller>
 </template>
 <script setup lang="ts">
-import { ref, onBeforeUnmount, onDeactivated } from 'vue'
+import { ref, computed, onBeforeUnmount, onDeactivated, useTemplateRef } from 'vue'
+import type { PropType } from 'vue'
 import { ArrowRight } from '@element-plus/icons-vue'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
@@ -102,11 +103,11 @@ function toggleExpand(item) {
 function scrollToItem(item) {
     if (!item) return
     activeItem.value = item
-  var findIndex = list.value.findIndex((i) => i[props.keyField] === item[props.keyField])
+    const findIndex = list.value.findIndex((i) => i[props.keyField] === item[props.keyField])
     if (findIndex === -1) {
         return
     }
-  var top = props.minItemSize * findIndex
+    const top = props.minItemSize * findIndex
     // 取消之前的动画
     cancelAnimationFrame(AnimationId.value as number)
     scrollTo(scrollbarScrollTop.value, top, scrollbarScrollTop.value)
@@ -120,7 +121,7 @@ function scrollToIndex(index) {
 
     activeItem.value = list.value[index]
 
-  var top = props.minItemSize * index
+    const top = props.minItemSize * index
     // 取消之前的动画
     cancelAnimationFrame(AnimationId.value as number)
     scrollTo(scrollbarScrollTop.value, top, scrollbarScrollTop.value)
@@ -130,7 +131,6 @@ function scrollToIndex(index) {
  * @param position 要滚动到的位置
  */
 function scrollToPosition(position: number) {
-
     if (position < 0) return
     // 取消之前的动画
     cancelAnimationFrame(AnimationId.value as number)

web/src/components/VirtualCollapsePanel/readme.md

@@ -0,0 +1,15 @@
+# 使用示例
+
+```vue
+<VirtualCollapsePanel
+  ref="scrollbarRef"
+  :data="filterMarkers"
+  key-field="id"
+  name-field="name"
+  :min-item-size="40"
+>
+  <template #header="{ item }">
+  </template>
+  <template #content="{ item }"> </template>
+</VirtualCollapsePanel>
+```