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号