ActionTimeline

원문 보기 위키 갱신 2026.10.11

ActionTimeline (작업 타임라인)

명령 실행 상황과 시간을 타임라인으로 보여주는 컴포넌트예요.

출처: 문서

본문

기본 사용법

기본 레이아웃은 가로 방향이고, 왼쪽부터 아이콘, 콘텐츠 영역, 시간의 세 영역으로 나뉘어요.

:::demo

<template>
  <d-action-timeline :data="timeData" :load-more-config="loadMoreConfig" @action-load-more="onLoadMore">
    <template #content="page">
      <div style="display:flex;flex-direction:column">
        <div style="height:24px;line-height:24px;">{{ page.option.action }}</div>
        <div>{{ page.option.actionContent }}</div>
      </div>
    </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: 'icon-closed-merge',
            status: 'color-none',
          },
          {
            action: '实现具体操作',
            actionContent: '操作内容2',
            createdAt: '2022/07/01 15:21:54 GMT+08:00',
            icon: 'icon-merge-request',
            status: 'color-info',
          },
        ],
      },
      {
        time: '2022-06-30',
        actions: [
          {
            action: '实现具体操作',
            actionContent: '操作内容3',
            createdAt: '2022-06-30 21:39:25',
            icon: 'icon-add-member',
            status: 'color-success',
          },
          {
            action: '实现具体操作',
            actionContent: '操作内容4',
            createdAt: 'Fri Jun 30 2022 15:21:54 GMT+0800（中国标准时间）',
            icon: 'icon-remove-member-icon',
            status: 'color-danger',
          },
        ],
      },
    ];
    const loadMoreConfig = {
      loadMore: true,
      loadMoreText: 'Check More',
    };
    const onLoadMore = () => {
      console.log('load more');
    };

    return {
      timeData,
      loadMoreConfig,
      onLoadMore,
    };
  },
});
</script>

:::

세로 레이아웃

세로 레이아웃에서는 위에서 아래로 title 영역과 content 영역으로 나뉘어요.

:::demo

<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>
  </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: 'icon icon-dot-status',
            status: 'color-danger',
          },
          {
            action: '操作信息',
            actionContent: '操作内容2',
            icon: 'icon icon-dot-status',
            status: 'color-success',
            createdAt: '2022/07/01 9:38:00',
          },
        ],
      },
      {
        time: '2022-06-30',
        actions: [
          {
            action: '操作信息',
            actionContent: '操作内容3',
            createdAt: '2022-06-30 21:39:25',
            icon: 'icon icon-dot-status',
            status: 'color-none',
          },
          {
            action: '操作信息',
            actionContent: '操作内容4',
            createdAt: 'Fri Jun 30 2022 15:21:54 GMT+0800（中国标准时间）',
            icon: 'icon icon-dot-status',
            status: 'color-info',
          },
          {
            action: '操作信息',
            actionContent: '操作内容5',
            createdAt: 'Fri Jun 30 2022 15:21:54 GMT+0800（中国标准时间）',
            icon: 'icon icon-dot-status',
            status: 'color-warning',
          },
        ],
      },
    ];
    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;
}
</style>

:::

아이콘 영역 커스터마이즈

아이콘 영역의 스타일과 이벤트를 커스터마이즈하려면 iconContent 슬롯을 사용하면 돼요.

:::demo

<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 파라미터

파라미터	타입	기본값	설명
data	ActionData[]	--	필수, 표시할 작업 데이터
layout	TimelineLayout	horizontal	선택, 가로 또는 세로 레이아웃 선택
load-more-config	LoadMoreConfig	--	선택, 더 보기 표시 여부
show-tail-line	`boolean`	true	선택, 목록 마지막 항목의 타임라인 표시 여부
show-status-bg-color	`boolean`	false	선택, 상태 아이콘 배경색 표시 여부
show-status-line-color	`boolean`	false	선택, 타임라인 상태색 표시 여부

ActionTimeline 이벤트

이벤트명	콜백 파라미터	설명
action-load-more	`Function()`	'더 보기' 클릭 시 트리거되는 이벤트

ActionTimeline 슬롯

슬롯명	파라미터	설명
content	`{ option: ActionItem }`	필수, 콘텐츠 영역 슬롯
title	`{ option: ActionItem }`	제목 영역 슬롯, 가로 레이아웃에서는 선택, 세로 레이아웃에서는 필수
iconContent	`{ option: ActionItem }`	선택, 아이콘 영역 슬롯

인터페이스 정의

ActionItem

interface ActionItem {
  action?: string;
  actionContent?: string;
  createdAt?: string;
  icon?: string;
  status?: 'color-none' | 'color-danger' | 'color-info' | 'color-success';
  [k: string]: any;
}

ActionData

interface ActionData {
  time?: string;
  actions?: ActionItem[];
}

LoadMoreConfig

interface LoadMoreConfig {
  type?: string;
  loadMore?: boolean;
  isToTop?: boolean;
  loadMoreText?: string;
  toTopText?: string;
}

TimelineLayout

type TimelineLayout = 'horizontal' | 'vertical';

더 알아보기 (Learn more)

layout 속성으로 가로·세로 배치를 바꾸고, 슬롯으로 아이콘과 내용 영역을 자유롭게 꾸밀 수 있어요.