fix(indexes): 修复索引为数字字符串时侧边栏不能正常激活的问题 (#1577)

* fix(indexes): update props indexList * fix(indexes): 修复索引为数字字符串时侧边栏不能正常激活的问题 * fix(indexes): 修复索引吸顶时，切换索引过程上一个索引直接消失的问题 * docs(Indexes): sync api docs --------- Co-authored-by: anlyyao <[email protected]>
Tencent · Sep 11, 2024 · f23c611 · f23c611
1 parent 0534ed7
commit f23c611
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 18 deletions.
diff --git a/src/indexes/demos/custom.vue b/src/indexes/demos/custom.vue
@@ -57,6 +57,7 @@ const change = (index: number | string) => {
 <style lang="less">
 .component-wrap {
   height: calc(100vh - 50px);
+  background-color: #fff;
 }
 
 .capsule {
@@ -65,7 +66,7 @@ const change = (index: number | string) => {
   height: 30px;
   border-radius: 15px;
   background-color: #f3f3f3;
-  padding-left: 32rpx;
+  padding-left: 16px;
   display: flex;
   align-items: center;
   font-size: 14px;

diff --git a/src/indexes/indexes.en-US.md b/src/indexes/indexes.en-US.md
@@ -6,7 +6,7 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-indexList | Array | - | Typescript：`string [] \| number[]` | N
+indexList | Array | - | Typescript：`Array<string \| number>` | N
 sticky | Boolean | true | Typescript：`Boolean` | N
 stickyOffset | Number | 0 | \- | N
 onChange | Function |  | Typescript：`(index: string \| number) => void`<br/> | N

diff --git a/src/indexes/indexes.md b/src/indexes/indexes.md
@@ -6,7 +6,7 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-indexList | Array | - | 索引字符列表。不传默认 `A-Z`。TS 类型：`string [] \| number[]` | N
+indexList | Array | - | 索引字符列表。不传默认 `A-Z`。TS 类型：`Array<string \| number>` | N
 sticky | Boolean | true | 索引是否吸顶，默认为true。TS 类型：`Boolean` | N
 stickyOffset | Number | 0 | 锚点吸顶时与顶部的距离	 | N
 onChange | Function |  | TS 类型：`(index: string \| number) => void`<br/>索引发生变更时触发事件 | N

diff --git a/src/indexes/indexes.tsx b/src/indexes/indexes.tsx
@@ -7,30 +7,27 @@ import {
   onBeforeUnmount,
   provide,
   computed,
-  ComponentInternalInstance,
   watch,
+  ComponentPublicInstance,
 } from 'vue';
 import throttle from 'lodash/throttle';
 import { preventDefault } from '../shared/dom';
 import config from '../config';
 import IndexesProps from './props';
 import { usePrefixClass } from '../hooks/useClass';
 import { useTNodeJSX } from '../hooks/tnode';
-
-interface Child extends ComponentInternalInstance {
-  [key: string]: any;
-}
+import { TdIndexesAnchorProps } from './type';
 
 interface State {
   showSidebarTip: boolean;
   activeSidebar: string | number;
-  children: Child[];
+  children: ComponentPublicInstance<TdIndexesAnchorProps>[];
 }
 
 interface GroupTop {
   height: number;
   top: number;
-  anchor: string;
+  anchor: string | number;
   totalHeight: number;
 }
 
@@ -100,7 +97,9 @@ export default defineComponent({
             wrapper.classList.add(`${wrapperClass}--sticky`);
             wrapper.classList.add(`${wrapperClass}--active`);
             header.classList.add(`${headerClass}--active`);
-            wrapper.style = `transform: translate3d(0, ${betwixt ? offset : 0}px, 0); top: ${stickyTop}px;`;
+            wrapper.style = `transform: translate3d(0, ${
+              betwixt ? offset - groupTop[index].height : 0
+            }px, 0); top: ${stickyTop}px;`;
           } else {
             wrapper.classList.remove(`${wrapperClass}--sticky`);
             wrapper.classList.remove(`${wrapperClass}--active`);
@@ -146,14 +145,12 @@ export default defineComponent({
     const getAnchorsRect = () => {
       return Promise.all(
         state.children.map((child) => {
-          const { $el } = child;
-          const { dataset } = $el;
-          const { index } = dataset;
+          const { $el, index } = child;
           const rect = $el.getBoundingClientRect();
           groupTop.push({
             height: rect.height,
             top: rect.top - parentRect.value.top,
-            anchor: /^\d+$/.test(index) ? Number(index) : index,
+            anchor: index,
             totalHeight: 0,
           });
           return child;
@@ -168,15 +165,15 @@ export default defineComponent({
       const target = document.elementFromPoint(clientX, clientY);
       if (target && target.className === `${indexesClass.value}__sidebar-item` && target instanceof HTMLElement) {
         const { index } = target.dataset;
-        const curIndex = /^\d+$/.test(index ?? '') ? Number(index) : index;
+        const curIndex = indexList.value.find((idx) => String(idx) === index);
         if (curIndex !== undefined && state.activeSidebar !== curIndex) {
           setActiveSidebarAndTip(curIndex);
           scrollToByIndex(curIndex);
         }
       }
     };
 
-    const relation = (child: ComponentInternalInstance) => {
+    const relation = (child: ComponentPublicInstance) => {
       child && state.children.push(child);
     };
 

diff --git a/src/indexes/type.ts b/src/indexes/type.ts
@@ -8,7 +8,7 @@ export interface TdIndexesProps {
   /**
    * 索引字符列表。不传默认 `A-Z`
    */
-  indexList?: string[] | number[];
+  indexList?: Array<string | number>;
   /**
    * 索引是否吸顶，默认为true
    * @default true