feat(IndexBar): add teleport prop (#8820)

src/index-bar/IndexBar.tsx

@@ -4,8 +4,10 @@ import {
   computed,
   nextTick,
   PropType,
+  Teleport,
   onMounted,
   CSSProperties,
+  TeleportProps,
   defineComponent,
   ExtractPropTypes,
 } from 'vue';
@@ -49,6 +51,7 @@ export const INDEX_BAR_KEY = Symbol(name);
 const props = {
   sticky: truthProp,
   zIndex: [Number, String],
+  teleport: [String, Object] as PropType<TeleportProps['to']>,
   highlightColor: String,
   stickyOffsetTop: {
     type: Number,
@@ -252,10 +255,7 @@ export default defineComponent({
       }
     };
 
-    useExpose({ scrollTo });
-
-    return () => (
-      <div ref={root} class={bem()}>
+    const renderSidebar = () => (
       <div
         class={bem('sidebar')}
         style={sidebarStyle.value}
@@ -265,6 +265,17 @@ export default defineComponent({
       >
         {renderIndexes()}
       </div>
+    );
+
+    useExpose({ scrollTo });
+
+    return () => (
+      <div ref={root} class={bem()}>
+        {props.teleport ? (
+          <Teleport to={props.teleport}>{renderSidebar()}</Teleport>
+        ) : (
+          renderSidebar()
+        )}
         {slots.default?.()}
       </div>
     );

src/index-bar/README.md

@@ -76,6 +76,7 @@ export default {
 | sticky | Whether to enable anchor sticky top | _boolean_ | `true` |
 | sticky-offset-top | Anchor offset top when sticky | _number_ | `0` |
 | highlight-color | Index character highlight color | _string_ | `#ee0a24` | - |
+| teleport `v3.0.19` | Specifies a target element where IndexBar will be mounted | _string \| Element_ | - |
 
 ### IndexAnchor Props
 

src/index-bar/README.zh-CN.md

@@ -80,6 +80,7 @@ export default {
 | sticky | 是否开启锚点自动吸顶 | _boolean_ | `true` |
 | sticky-offset-top | 锚点自动吸顶时与顶部的距离 | _number_ | `0` |
 | highlight-color | 索引字符高亮颜色 | _string_ | `#ee0a24` |
+| teleport `v3.0.19` | 指定索引栏挂载的节点 | _string \| Element_ | - |
 
 ### IndexAnchor Props
 

src/index-bar/test/index.spec.js

@@ -193,3 +193,16 @@ test('should scroll to target element after calling scrollTo method', () => {
   expect(scrollIntoView).toHaveBeenCalledTimes(1);
   expect(onSelect).toHaveBeenCalledWith('C');
 });
+
+test('should render teleport prop correctly', () => {
+  const root = document.createElement('div');
+  mount({
+    render: () => (
+      <IndexBar teleport={root}>
+        <IndexAnchor index="A">Title A</IndexAnchor>
+      </IndexBar>
+    ),
+  });
+
+  expect(root.querySelector('.van-index-bar__sidebar')).toBeTruthy();
+});