Vue DevUI
主题

Timeline 时间轴

时间轴展示组件。

何时使用

当需要向用户展示时间进度和每个时间点的事件状态时。

基本用法

通过 direction 属性配置时间线排列方向，默认值为vertical。

2021-10-1
Download
2021-10-2
Check
2021-10-3
Build
2021-10-4
Depoy
2021-10-5
End
<template>
  <div>
    <d-radio-group direction="row" v-model="choose">
      <d-radio v-for="item in list" :key="item" :value="item">
        {{ item }}
      </d-radio>
    </d-radio-group>
    <d-timeline :direction="choose" center>
      <d-timeline-item center v-for="(item, index) in timeAxisList" :key="index" :time="item.time" :dot-color="item.dotColor">
        {{ item.text }}
      </d-timeline-item>
    </d-timeline>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const list = ref(['vertical', 'horizontal']);
    const choose = ref('vertical');
    const timeAxisList = ref([
      {
        text: 'Download',
        time: '2021-10-1',
      },
      {
        text: 'Check',
        time: '2021-10-2',
        dotColor: 'var(--devui-success)',
      },
      {
        text: 'Build',
        time: '2021-10-3',
        dotColor: 'var(--devui-danger)',
      },
      {
        text: 'Depoy',
        time: '2021-10-4',
        dotColor: 'var(--devui-warning)',
      },
      {
        text: 'End',
        time: '2021-10-5',
        dotColor: 'var(--devui-waiting)',
      },
    ]);
    return { timeAxisList, list, choose };
  },
});
</script>

自定义样式

2021-10-1
Start
2021-10-2
Check
2021-10-3
Debug
2021-10-4
Build
2021-10-5
Display
<template>
  <d-timeline direction="horizontal" center>
    <d-timeline-item
      v-for="(item, index) in timeAxisList"
      :key="index"
      :dot-color="item.dotColor"
      :line-style="item.lineStyle"
      :line-color="item.lineColor"
    >
      <template #time>
        <div>{{ item.time }}</div>
      </template>
      <template #dot v-if="item.dot">
        <d-icon :name="item.dot"></d-icon>
      </template>
      {{ item.text }}
    </d-timeline-item>
  </d-timeline>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const timeAxisList = ref([
      {
        text: 'Start',
        time: '2021-10-1',
        lineStyle: 'solid',
        dot: 'cancel-forbidden',
      },
      {
        text: 'Check',
        time: '2021-10-2',
        dotColor: 'var(--devui-success)',
        lineStyle: 'dashed',
        lineColor: 'var(--devui-success)',
        dot: 'classroom-approve',
      },
      {
        text: 'Debug',
        time: '2021-10-3',
        dotColor: 'var(--devui-info)',
        lineStyle: 'dotted',
        lineColor: 'var(--devui-info)',
        dot: 'add-bug',
      },
      {
        text: 'Build',
        time: '2021-10-4',
        dotColor: 'var(--devui-warning)',
        lineStyle: 'none',
        lineColor: 'var(--devui-warning)',
        dot: 'build-with-tool',
      },
      {
        text: 'Display',
        time: '2021-10-5',
        dotColor: 'var(--devui-danger)',
        dot: 'go-chart',
      },
    ]);
    return { timeAxisList };
  },
});
</script>

自定义内容

可以使用 mode 为 alternative 设置内容交替展示

2020
第四季度交付版本1.0
发布日期：2019/11/01
版本状态：
已发布
第一季度交付版本2.0
发布日期：2020/03/01
版本状态：
未开始
第二季度交付版本1.0
发布日期：2020/05/01
版本状态：
进行中
第三季度交付版本1.0
发布日期：2020/09/01
版本状态：
未开始
第三季度交付版本1.0
发布日期：2020/11/01
版本状态：
已发布
<template>
  <d-timeline direction="horizontal" mode="alternative">
    <d-timeline-item v-for="(item, index) in timeAxisList" :key="index" :dot-color="item.dotColor" line-style="dashed">
      <template #default="data">
        <div style="position: relative">
          <div
            v-if="data.position === 'bottom'"
            style="margin-bottom: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
          ></div>
          <div
            :style="{
              'border-left': '4px solid',
              'box-shadow': '0 2px 4px 0 rgba(0, 0, 0, 0.1)',
              padding: '12px 8px',
              borderColor: item.dotColor,
              backgroundColor: item.backgroundColor,
            }"
          >
            <div style="padding-bottom: 8px; font-size: 14px; font-weight: bold">{{ item.title }}</div>
            <div style="padding-bottom: 8px">发布日期：{{ item.date }}</div>
            <div style="padding-bottom: 8px">
              版本状态：
              <d-tag :color="item.dotColor">{{ item.status }}</d-tag>
            </div>
          </div>
          <div
            v-if="data.position === 'top'"
            style="margin-top: 4px; position: relative; left: 4px; width: 2px; height: 40px; background-color: #dfe1e6"
          ></div>
        </div>
      </template>
      <template #extra v-if="index === 0">
        <div style="text-align: center; width: 36px; height: 36px; border-radius: 18px; border: 2px solid #dfe1e6; background: white">
          <span style="line-height: 32px">2020</span>
        </div>
      </template>
    </d-timeline-item>
  </d-timeline>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const timeAxisList = ref([
      {
        text: 'hello',
        dotColor: 'var(--devui-success)',
        extraElement: {},
        title: '第四季度交付版本1.0',
        date: '2019/11/01',
        status: '已发布',
      },
      {
        text: 'world',
        dotColor: 'var(--devui-danger)',
        title: '第一季度交付版本2.0',
        date: '2020/03/01',
        backgroundColor: 'rgba(255, 230, 230, 0.2)',
        status: '未开始',
      },
      {
        text: 'nihao',
        dotColor: 'var(--devui-warning)',
        title: '第二季度交付版本1.0',
        date: '2020/05/01',
        status: '进行中',
      },
      {
        text: 'DevUI',
        dotColor: 'var(--devui-danger)',
        title: '第三季度交付版本1.0',
        date: '2020/09/01',
        status: '未开始',
      },
      {
        text: 'Awesome',
        dotColor: 'var(--devui-success)',
        title: '第三季度交付版本1.0',
        date: '2020/11/01',
        status: '已发布',
      },
    ]);
    return { timeAxisList };
  },
});
</script>

自定义内容位置

当 direction 为 horizontal 时 position 默认 bottom

Download
Check
Build
Depoy
End

当 direction 为 vertical 时 position 默认 right

Download
Check
Build
Depoy
End
<template>
  <h5><p>当 direction 为 horizontal 时 position 默认 bottom</p></h5>
  <d-timeline direction="horizontal" center>
    <d-timeline-item position="top" dot-color="chocolate">Download</d-timeline-item>
    <d-timeline-item dot-color="var(--devui-success)">Check</d-timeline-item>
    <d-timeline-item position="top" dot-color="var(--devui-danger)">Build</d-timeline-item>
    <d-timeline-item dot-color="var(--devui-warning)">Depoy</d-timeline-item>
    <d-timeline-item position="top" dot-color="var(--devui-waiting)">End</d-timeline-item>
  </d-timeline>
  <h5><p>当 direction 为 vertical 时 position 默认 right</p></h5>
  <d-timeline direction="vertical">
    <d-timeline-item position="left" dot-color="chocolate">Download</d-timeline-item>
    <d-timeline-item position="right" dot-color="var(--devui-success)">Check</d-timeline-item>
    <d-timeline-item position="left" dot-color="var(--devui-danger)">Build</d-timeline-item>
    <d-timeline-item position="right" dot-color="var(--devui-warning)">Depoy</d-timeline-item>
    <d-timeline-item position="left" dot-color="var(--devui-waiting)">End</d-timeline-item>
  </d-timeline>
</template>

设置时间位置

2019
Download
11-2
Check
2020
Build
11-4
Depoy
2021
End
<template>
  <d-timeline time-position="bottom">
    <d-timeline-item time="2019" time-position="left">Download</d-timeline-item>
    <d-timeline-item time="11-2" type="success">Check</d-timeline-item>
    <d-timeline-item time="2020" type="warning" time-position="left">Build</d-timeline-item>
    <d-timeline-item time="11-4" type="error">Depoy</d-timeline-item>
    <d-timeline-item time="2021" type="primary" time-position="left">End</d-timeline-item>
  </d-timeline>
</template>

Timeline 参数

参数类型默认说明跳转 Demo
directionTimelineDirectionvertical设置时间轴方向基本用法
centerbooleanfalse当方向为horizontal时，是否将内容设置居中基本用法
modeModenormal可选，normal模式下内容按默认方向排布，
alternative模式下内容交替排布		自定义内容
time-positionTimePositionleft可选，仅当direction 为 vertical 时定义时间参数位置
(全局设置，当与mode属性冲突时以mode为准)		自定义内容

TimelineItem 参数

参数类型默认说明跳转 Demo
timestring--可选，时间基本用法
textstring--可选，文本内容基本用法
dot-colorstring--可选，自定义时间圈颜色基本用法
line-styleLineStylesolid可选，设置线条样式（若没有设置，则默认时间轴最后一个元素为none）自定义样式
line-colorstring--可选，设置线条颜色自定义样式
positionPosition当direction为vertical时默认：right，
当direction为horizontal时，默认：bottom		可选，设置内容存在的位置，若有 time 则 time 处在相反的位置自定义内容位置
time-positionTimePositionleft可选，仅当direction 为 vertical 时定义时间参数位置(全局设置，当与position属性冲突时以position为准)设置时间位置
typeTypeprimary可选，时间点类型自定义内容

TimelineItem 插槽

参数描述跳转 Demo
default自定义内容自定义内容
dot自定义时间轴点自定义样式
time自定义时间自定义样式
extra自定义两个时间点间附加元素自定义内容

Timeline 类型定义

TimelineDirection 

type TimelineDirection = 'vertical' | 'horizontal';

Mode 

type Mode = 'normal' | 'alternative';

TimePosition 

type TimePosition = 'left' | 'bottom';

LineStyle 

type LineStyle = 'solid' | 'dashed' | 'dotted' | 'none';

Type 

type Type = 'primary' | 'success' | 'warning' | 'error';

Position 

type Position = 'top' | 'bottom' | 'left' | 'right';
Contributors
粤A2-20044005号