ActionTimeline组件新增自定义icon位置的内容插槽。 #1846 (#1872)

* feat(ActionTimeline): ActionTimeline组件新增自定义icon位置的内容插槽，未传入时默认使用原方式，对现有使用不影响。#1846 * feat(ActionTimeline): 删除多余的console #1846
DevCloudFE · Jun 3, 2024 · 3cdd771 · 3cdd771
1 parent 18e63c4
commit 3cdd771
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 4 deletions.
diff --git a/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx b/packages/devui-vue/devui/action-timeline/src/action-timeline.tsx
@@ -48,10 +48,10 @@ export default defineComponent({
         <div class={timelineItemClass(index, parentIndex, actionData, item)}>
           <div class="vertical-list-item-top">
             <div class="vertical-list-item-top-left">
-              <div class={itemIconClass(item, true)}>
+              {ctx.slots.iconContent?.({ option: item }) || <div class={itemIconClass(item, true)}>
                 {!item.icon && <div class="list-empty-icon-dot"></div>}
                 <em class={itemIconClass(item)}></em>
-              </div>
+              </div>}
               <div class="vertical-list-item-top-left-title">{ctx.slots.title?.({ option: item })}</div>
             </div>
             <div class="dp-action-timeline-item-data">{item.createdAt}</div>
@@ -62,10 +62,10 @@ export default defineComponent({
     const renderHorizontalBody = (actionData: ActionData, parentIndex: number) =>
       actionData.actions?.map((item, index) => (
         <div class={timelineItemClass(index, parentIndex, actionData, item)}>
-          <div class={itemIconClass(item, true)}>
+          {ctx.slots.iconContent?.({ option: item }) || <div class={itemIconClass(item, true)}>
             {!item.icon && <div class="list-empty-icon-dot"></div>}
             <em class={itemIconClass(item)}></em>
-          </div>
+          </div>}
           <div class="dp-action-timeline-list-data">{ctx.slots.content?.({ option: item })}</div>
           <div class="dp-action-timeline-item-date">{item.createdAt}</div>
           {!(actionData.actions && data?.value && index === actionData.actions.length - 1 && parentIndex === data?.value?.length - 1) && (

diff --git a/packages/devui-vue/docs/components/action-timeline/index.md b/packages/devui-vue/docs/components/action-timeline/index.md
@@ -180,6 +180,118 @@ export default defineComponent({
 
 :::
 
+### 自定义Icon位置的代码
+
+icon区域想要自定义样式和事件，可以通过iconContent插槽实现。
+
+:::demo
+
+```vue
+<template>
+  <d-action-timeline :data="timeData" :load-more-config="loadMoreConfig" layout="vertical" :show-tail-line="false">
+    <template #title="page">
+      <div>{{ page.option.action }}</div>
+    </template>
+    <template #content="page">
+      <div class="custom-content">{{ page.option.actionContent }}</div>
+    </template>
+    <template #iconContent="page">
+      <d-tooltip position="top" :content="page.option.iconDes">
+        <div class="custom-icon">{{ page.option.icon }}</div>
+      </d-tooltip>
+    </template>
+  </d-action-timeline>
+</template>
+
+<script>
+import { defineComponent, reactive, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const timeData = [
+      {
+        time: '2022-07-01',
+        actions: [
+          {
+            action: '操作信息',
+            actionContent: '操作内容1',
+            createdAt: '2022-07-01T07:30:09.681Z',
+            icon: 'A',
+            iconDes: '该事件发生在2022-07-01 07:30:09，进行了操作内容1的调整',
+          },
+          {
+            action: '操作信息',
+            actionContent: '操作内容2',
+            icon: 'B',
+            createdAt: '2022/07/01 9:38:00',
+            iconDes: '该事件发生在2022/07/01 9:38:00，进行了操作内容2的调整',
+          },
+        ],
+      },
+      {
+        time: '2022-06-30',
+        actions: [
+          {
+            action: '操作信息',
+            actionContent: '操作内容3',
+            createdAt: '2022-06-30 21:39:25',
+            icon: 'C',
+            iconDes: '该事件发生在2022-06-30 21:39:25，进行了操作内容3的调整',
+          },
+          {
+            action: '操作信息',
+            actionContent: '操作内容4',
+            createdAt: 'Fri Jun 30 2022 15:21:54 GMT+0800（中国标准时间）',
+            icon: 'D',
+            iconDes: '该事件发生在Fri Jun 30 2022 15:21:54，进行了操作内容4的调整',
+          },
+          {
+            action: '操作信息',
+            actionContent: '操作内容5',
+            createdAt: 'Fri Jun 30 2022 15:21:54 GMT+0800（中国标准时间）',
+            iconDes: '该事件发生在Fri Jun 30 2022 15:21:54，进行了操作内容5的调整',
+            icon: 'E',
+          },
+        ],
+      },
+    ];
+    const loadMoreConfig = {
+      type: 'button',
+    };
+    return {
+      timeData,
+      loadMoreConfig,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.custom-content {
+  background: #fff;
+  box-shadow: var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-feedback-overlay-shadow, rgba(37, 43, 58, 0.16));
+  border-radius: 4px;
+  margin-left: 32px;
+  margin-top: 12px;
+  padding: 12px 20px;
+}
+.custom-icon {
+  width: 24px;
+  height: 24px;
+  background: #abcdef;
+  border-radius: 50%;
+  line-height: 24px;
+  text-align: center;
+  color: #FFFFFF;
+  position: relative;
+  margin-right: 8px;
+  z-index: 3;
+}
+</style>
+```
+
+:::
+
 ### ActionTimeline 参数
 
 | 参数名                 | 类型                              | 默认值     | 说明                               |
@@ -203,6 +315,7 @@ export default defineComponent({
 | :------ | :----------------------- | :------------------------------------------- |
 | content | `{ option: ActionItem }` | 必选，内容区域插槽                           |
 | title   | `{ option: ActionItem }` | 标题区域插槽，横向布局时可选，纵向布局时必选 |
+| iconContent   | `{ option: ActionItem }` | 可选，图标区域插槽 |
 
 ### 接口定义