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 }` | 可选，图标区域插槽 |
 
 ### 接口定义