feat: timeline插槽作用域添加item

WeBankFinTech · Aug 29, 2024 · 5a2b3be · 5a2b3be
1 parent 1d3bd9c
commit 5a2b3be
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/components/timeline/icon.tsx b/components/timeline/icon.tsx
@@ -15,6 +15,7 @@ const iconProps = {
     index: { type: Number, required: true },
     icon: { type: [String, Function] as PropType<TimelineNode['icon']> },
     slotRender: { type: Function as PropType<UnboxSlots['icon']> },
+    data: { type: Array as PropType<TimelineNode[]> },
 } as const satisfies ComponentObjectPropsOptions;
 
 export default defineComponent({
@@ -25,9 +26,9 @@ export default defineComponent({
             let customIcon: VNodeChild;
             // prop 的渲染函数优先级高于插槽
             if (props.slotRender) {
-                customIcon = props.slotRender({ index: props.index });
+                customIcon = props.slotRender({ index: props.index, item: props.data[props.index] });
             } else if (typeof props.icon === 'function') {
-                customIcon = props.icon({ index: props.index });
+                customIcon = props.icon({ index: props.index, item: props.data[props.index] });
             }
 
             // 自定义渲染没有内容时，fallback

diff --git a/components/timeline/props.ts b/components/timeline/props.ts
@@ -54,6 +54,7 @@ type Color = CSSProperties['color'];
  */
 export interface TimelineNodeSlotCommonParams {
     index: number;
+    item: TimelineNode;
 }
 
 /** 时间轴结点的参数 */

diff --git a/components/timeline/timeline.tsx b/components/timeline/timeline.tsx
@@ -136,19 +136,19 @@ const renderNode = (nodeProps: {
     let descContent: VNodeChild;
     // prop 的渲染函数优先级高于插槽
     if (slots.desc) {
-        descContent = slots.desc({ index });
+        descContent = slots.desc({ index, item: props.data[index] });
     } else if (typeof desc === 'function') {
-        descContent = desc({ index });
+        descContent = desc({ index, item: props.data[index] });
     } else {
         descContent = desc;
     }
 
     // prop 的渲染函数优先级高于插槽
     let titleContent: VNodeChild;
     if (slots.title) {
-        titleContent = slots.title({ index });
+        titleContent = slots.title({ index, item: props.data[index] });
     } else if (typeof title === 'function') {
-        titleContent = title({ index });
+        titleContent = title({ index, item: props.data[index] });
     } else {
         titleContent = title;
     }
@@ -182,6 +182,7 @@ const renderNode = (nodeProps: {
                 key={index}
                 index={index}
                 icon={icon}
+                data={props.data}
                 style={[props.direction === 'column' && descPosition === 'opposite' && props.titleWidth && { left: props.titleWidth }]}
                 slotRender={slots.icon}
             />

diff --git a/docs/.vitepress/components/timeline/customDesc.vue b/docs/.vitepress/components/timeline/customDesc.vue
@@ -12,7 +12,7 @@
                 自定义辅助描述
             </span>
         </template>
-        <template #title="{ index }">
+        <template #title="{ index, item }">
             <span
                 :style="{
                     color:
@@ -21,14 +21,14 @@
                             : 'var(--f-primary-color)',
                 }"
             >
-                自定义标题
+                {{ item.title }}
             </span>
         </template>
     </FTimeline>
     <FDivider />
     <FTimeline :data="data1">
-        <template #desc="{ index }">
-            <div class="desc">{{ data1[index].desc }}</div>
+        <template #desc="{ item }">
+            <div class="desc">{{ item.desc }}</div>
         </template>
     </FTimeline>
 </template>

diff --git a/docs/.vitepress/components/timeline/customIcon.vue b/docs/.vitepress/components/timeline/customIcon.vue
@@ -1,8 +1,8 @@
 <template>
     <FTimeline :data="data" direction="row">
-        <template #icon="{ index }">
+        <template #icon="{ item }">
             <RightCircleOutlined
-                v-if="customNodes.has(data[index]?.title)"
+                v-if="customNodes.has(item.title)"
                 :size="16"
                 color="#7f00ff"
             />