From 026a1094c5e2b9496c1eac72db20044fb3d419c4 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 7 Jun 2021 19:31:40 +0800
Subject: [PATCH] feat(IndexBar): add teleport prop (#8820)

---
 src/index-bar/IndexBar.tsx       | 29 ++++++++++++++++++++---------
 src/index-bar/README.md          |  1 +
 src/index-bar/README.zh-CN.md    |  1 +
 src/index-bar/test/index.spec.js | 13 +++++++++++++
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/index-bar/IndexBar.tsx b/src/index-bar/IndexBar.tsx
index b202c81de..82f579af1 100644
--- a/src/index-bar/IndexBar.tsx
+++ b/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,19 +255,27 @@ export default defineComponent({
       }
     };
 
+    const renderSidebar = () => (
+      <div
+        class={bem('sidebar')}
+        style={sidebarStyle.value}
+        onClick={onClickSidebar}
+        onTouchstart={touch.start}
+        onTouchmove={onTouchMove}
+      >
+        {renderIndexes()}
+      </div>
+    );
+
     useExpose({ scrollTo });
 
     return () => (
       <div ref={root} class={bem()}>
-        <div
-          class={bem('sidebar')}
-          style={sidebarStyle.value}
-          onClick={onClickSidebar}
-          onTouchstart={touch.start}
-          onTouchmove={onTouchMove}
-        >
-          {renderIndexes()}
-        </div>
+        {props.teleport ? (
+          <Teleport to={props.teleport}>{renderSidebar()}</Teleport>
+        ) : (
+          renderSidebar()
+        )}
         {slots.default?.()}
       </div>
     );
diff --git a/src/index-bar/README.md b/src/index-bar/README.md
index 3d6722a4c..aec648acc 100644
--- a/src/index-bar/README.md
+++ b/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
 
diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md
index 5e7ebf1ff..95eb1e3ae 100644
--- a/src/index-bar/README.zh-CN.md
+++ b/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
 
diff --git a/src/index-bar/test/index.spec.js b/src/index-bar/test/index.spec.js
index 6d5e441bd..c4f5639de 100644
--- a/src/index-bar/test/index.spec.js
+++ b/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();
+});