Tu View PlusTimeline 时间轴
可视化地呈现时间流信息。
基础用法
时间轴的基础用法。
节点1
2023-10-10
节点2
2023-10-01
节点3
2023-09-30
<template>
<tu-radio-group
class="mb-2"
type="button"
v-model="isReverse"
@change="handleReverseChange"
>
<tu-radio :label="true">倒序</tu-radio>
<tu-radio :label="false">正序</tu-radio>
</tu-radio-group>
<tu-timeline :reverse="isReverse">
<tu-timeline-item label="2023-10-10">节点1</tu-timeline-item>
<tu-timeline-item label="2023-10-01">节点2</tu-timeline-item>
<tu-timeline-item label="2023-09-30">节点3</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const isReverse = ref(true);
const handleReverseChange = (bool: boolean) => {
isReverse.value = bool;
};
</script><template>
<tu-radio-group
class="mb-2"
type="button"
v-model="isReverse"
@change="handleReverseChange"
>
<tu-radio :label="true">倒序</tu-radio>
<tu-radio :label="false">正序</tu-radio>
</tu-radio-group>
<tu-timeline :reverse="isReverse">
<tu-timeline-item label="2023-10-10">节点1</tu-timeline-item>
<tu-timeline-item label="2023-10-01">节点2</tu-timeline-item>
<tu-timeline-item label="2023-09-30">节点3</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const isReverse = ref(true);
const handleReverseChange = (bool: boolean) => {
isReverse.value = bool;
};
</script>自定义节点
在 dotType 为 solid 或 hollow 类型下可通过设置属性 dotColor 为节点添加颜色。同时可通过 dot 插槽直接传入自定义节点样式。优先级高于 dotColor 和 dotType。
节点1
2023-09-30
节点2
2023-10-01
节点3
2023-10-02
<template>
<tu-timeline>
<tu-timeline-item label="2023-09-30" dot-type="hollow" dot-color="#5e7ce0">
节点1
</tu-timeline-item>
<tu-timeline-item label="2023-10-01" dot-type="solid" dot-color="#5e7ce0">
节点2
</tu-timeline-item>
<tu-timeline-item label="2023-10-02">
<template #dot>
<tu-icon color="#5e7ce0">
<WarningFilled />
</tu-icon>
</template>
节点3
</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { WarningFilled } from '@tu-view-plus/icons-vue';
</script><template>
<tu-timeline>
<tu-timeline-item label="2023-09-30" dot-type="hollow" dot-color="#5e7ce0">
节点1
</tu-timeline-item>
<tu-timeline-item label="2023-10-01" dot-type="solid" dot-color="#5e7ce0">
节点2
</tu-timeline-item>
<tu-timeline-item label="2023-10-02">
<template #dot>
<tu-icon color="#5e7ce0">
<WarningFilled />
</tu-icon>
</template>
节点3
</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { WarningFilled } from '@tu-view-plus/icons-vue';
</script>自定义轴线样式
自定义轴线样式。有 solid、dashed、dotted 三种类型可选，默认为solid类型。
节点1
节点1的描述信息
2023-09-30
节点2
节点2的描述信息
2023-10-01
节点3
节点3的描述信息
2023-10-02
<template>
<tu-timeline>
<tu-timeline-item label="2023-09-30" lineType="dashed">
节点1
<div class="demo-timeline-description">节点1的描述信息</div>
</tu-timeline-item>
<tu-timeline-item label="2023-10-01" lineType="dashed">
节点2
<div class="demo-timeline-description">节点2的描述信息</div>
</tu-timeline-item>
<tu-timeline-item label="2023-10-02" lineType="dashed">
节点3
<div class="demo-timeline-description">节点3的描述信息</div>
</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.demo-timeline-description {
font-size: 12px;
margin-top: 4px;
}
</style><template>
<tu-timeline>
<tu-timeline-item label="2023-09-30" lineType="dashed">
节点1
<div class="demo-timeline-description">节点1的描述信息</div>
</tu-timeline-item>
<tu-timeline-item label="2023-10-01" lineType="dashed">
节点2
<div class="demo-timeline-description">节点2的描述信息</div>
</tu-timeline-item>
<tu-timeline-item label="2023-10-02" lineType="dashed">
节点3
<div class="demo-timeline-description">节点3的描述信息</div>
</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.demo-timeline-description {
font-size: 12px;
margin-top: 4px;
}
</style>幽灵节点
当任务状态正在发生，还在记录过程中，设置 pending 为 true时即可用幽灵节点来表示当前的时间节点。
节点1
2023-09-30
节点2
2023-10-01
<template>
<tu-timeline pending>
<tu-timeline-item label="2023-09-30" dotColor="#52C419">
节点1
</tu-timeline-item>
<tu-timeline-item label="2023-10-01" dotColor="#F5222D">
节点2
</tu-timeline-item>
</tu-timeline>
</template><template>
<tu-timeline pending>
<tu-timeline-item label="2023-09-30" dotColor="#52C419">
节点1
</tu-timeline-item>
<tu-timeline-item label="2023-10-01" dotColor="#F5222D">
节点2
</tu-timeline-item>
</tu-timeline>
</template>自定义幽灵节点
通过插槽 pending-dot 自定制幽灵节点的轴点。
节点1
2023-09-30
节点2
2023-10-01
<template>
<tu-timeline pending>
<template #dot>
<tu-icon class="is-loading">
<RefreshRight />
</tu-icon>
</template>
<tu-timeline-item label="2023-09-30"> 节点1 </tu-timeline-item>
<tu-timeline-item label="2023-10-01"> 节点2 </tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { RefreshRight } from '@tu-view-plus/icons-vue';
</script><template>
<tu-timeline pending>
<template #dot>
<tu-icon class="is-loading">
<RefreshRight />
</tu-icon>
</template>
<tu-timeline-item label="2023-09-30"> 节点1 </tu-timeline-item>
<tu-timeline-item label="2023-10-01"> 节点2 </tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { RefreshRight } from '@tu-view-plus/icons-vue';
</script>标签文本位置
通过 labelPosition 设置标签文本位置。
节点1
2023-09-30
节点2
2023-10-01
节点3
2023-10-02
<template>
<div>
<tu-radio-group
class="mb-2"
type="button"
v-model="position"
@change="handleLabelPositionChange"
>
<tu-radio label="same">同侧</tu-radio>
<tu-radio label="relative">交替</tu-radio>
</tu-radio-group>
<tu-timeline mode="left" :labelPosition="position">
<tu-timeline-item label="2023-09-30"> 节点1 </tu-timeline-item>
<tu-timeline-item label="2023-10-01"> 节点2 </tu-timeline-item>
<tu-timeline-item label="2023-10-02"> 节点3 </tu-timeline-item>
</tu-timeline>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const position = ref('same');
const handleLabelPositionChange = (_position: string) => {
position.value = _position;
};
</script><template>
<div>
<tu-radio-group
class="mb-2"
type="button"
v-model="position"
@change="handleLabelPositionChange"
>
<tu-radio label="same">同侧</tu-radio>
<tu-radio label="relative">交替</tu-radio>
</tu-radio-group>
<tu-timeline mode="left" :labelPosition="position">
<tu-timeline-item label="2023-09-30"> 节点1 </tu-timeline-item>
<tu-timeline-item label="2023-10-01"> 节点2 </tu-timeline-item>
<tu-timeline-item label="2023-10-02"> 节点3 </tu-timeline-item>
</tu-timeline>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const position = ref('same');
const handleLabelPositionChange = (_position: string) => {
position.value = _position;
};
</script>纵向时间轴
竖直方向的时间轴。设置时间轴的展示类型 mode，显示时间轴在左侧、右侧、交替出现。
Tu View Plus
一款有触觉的 vue3.0 UI组件库
2023-08
Tu View Plus
一款有触觉的 vue3.0 UI组件库
2023-09
Tu View Plus
一款有触觉的 vue3.0 UI组件库
2023-10
<template>
<tu-radio-group
class="mb-2"
type="button"
v-model="mode"
@change="handleModeChange"
>
<tu-radio label="left">左侧</tu-radio>
<tu-radio label="alternate">交替</tu-radio>
<tu-radio label="right">右侧</tu-radio>
</tu-radio-group>
<tu-timeline :mode="mode">
<tu-timeline-item label="2023-08">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
<tu-timeline-item label="2023-09">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
<tu-timeline-item label="2023-10">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const mode = ref('left');
const handleModeChange = (_mode: string) => {
mode.value = _mode;
};
</script><template>
<tu-radio-group
class="mb-2"
type="button"
v-model="mode"
@change="handleModeChange"
>
<tu-radio label="left">左侧</tu-radio>
<tu-radio label="alternate">交替</tu-radio>
<tu-radio label="right">右侧</tu-radio>
</tu-radio-group>
<tu-timeline :mode="mode">
<tu-timeline-item label="2023-08">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
<tu-timeline-item label="2023-09">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
<tu-timeline-item label="2023-10">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const mode = ref('left');
const handleModeChange = (_mode: string) => {
mode.value = _mode;
};
</script>横向时间轴
通过 direction 设置展示横向时间轴。设置时间轴的展示类型 mode，显示时间轴在上方、下方、交替出现。
Tu View Plus
一款有触觉的 vue3.0 UI组件库
2023-08
Tu View Plus
一款有触觉的 vue3.0 UI组件库
2023-09
Tu View Plus
一款有触觉的 vue3.0 UI组件库
2023-10
<template>
<tu-radio-group
class="mb-2"
type="button"
v-model="mode"
@change="handleModeChange"
>
<tu-radio label="top">上方</tu-radio>
<tu-radio label="alternate">交替</tu-radio>
<tu-radio label="bottom">下方</tu-radio>
</tu-radio-group>
<tu-timeline direction="horizontal" :mode="mode">
<tu-timeline-item label="2023-08">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
<tu-timeline-item label="2023-09">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
<tu-timeline-item label="2023-10">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const mode = ref('top');
const handleModeChange = (_mode: string) => {
mode.value = _mode;
};
</script><template>
<tu-radio-group
class="mb-2"
type="button"
v-model="mode"
@change="handleModeChange"
>
<tu-radio label="top">上方</tu-radio>
<tu-radio label="alternate">交替</tu-radio>
<tu-radio label="bottom">下方</tu-radio>
</tu-radio-group>
<tu-timeline direction="horizontal" :mode="mode">
<tu-timeline-item label="2023-08">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
<tu-timeline-item label="2023-09">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
<tu-timeline-item label="2023-10">
<div style="margin-bottom: 6px">Tu View Plus</div>
<div style="font-size: 12px">一款有触觉的 vue3.0 UI组件库</div>
</tu-timeline-item>
</tu-timeline>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const mode = ref('top');
const handleModeChange = (_mode: string) => {
mode.value = _mode;
};
</script>自定义标签
通过 label 插槽自定义标签。
送元二使安西
渭城朝雨浥轻尘，客舍青青柳色新。
劝君更尽一杯酒，西出阳关无故人。
送元二使安西
渭城朝雨浥轻尘，客舍青青柳色新。
劝君更尽一杯酒，西出阳关无故人。
送元二使安西
渭城朝雨浥轻尘，客舍青青柳色新。
劝君更尽一杯酒，西出阳关无故人。
<template>
<tu-timeline>
<tu-timeline-item>
送元二使安西
<template #label>
<tu-card effect="up" class="mt-2 mb-4">
<p style="line-height: 1; font-size: 13px">
渭城朝雨浥轻尘，客舍青青柳色新。
</p>
<p style="line-height: 1; font-size: 13px">
劝君更尽一杯酒，西出阳关无故人。
</p>
</tu-card>
</template>
</tu-timeline-item>
<tu-timeline-item>
送元二使安西
<template #label>
<tu-card effect="up" class="mt-2 mb-4">
<p style="line-height: 1; font-size: 13px">
渭城朝雨浥轻尘，客舍青青柳色新。
</p>
<p style="line-height: 1; font-size: 13px">
劝君更尽一杯酒，西出阳关无故人。
</p>
</tu-card>
</template>
</tu-timeline-item>
<tu-timeline-item>
送元二使安西
<template #label>
<tu-card effect="up" class="mt-2">
<p style="line-height: 1; font-size: 13px">
渭城朝雨浥轻尘，客舍青青柳色新。
</p>
<p style="line-height: 1; font-size: 13px">
劝君更尽一杯酒，西出阳关无故人。
</p>
</tu-card>
</template>
</tu-timeline-item>
</tu-timeline>
</template><template>
<tu-timeline>
<tu-timeline-item>
送元二使安西
<template #label>
<tu-card effect="up" class="mt-2 mb-4">
<p style="line-height: 1; font-size: 13px">
渭城朝雨浥轻尘，客舍青青柳色新。
</p>
<p style="line-height: 1; font-size: 13px">
劝君更尽一杯酒，西出阳关无故人。
</p>
</tu-card>
</template>
</tu-timeline-item>
<tu-timeline-item>
送元二使安西
<template #label>
<tu-card effect="up" class="mt-2 mb-4">
<p style="line-height: 1; font-size: 13px">
渭城朝雨浥轻尘，客舍青青柳色新。
</p>
<p style="line-height: 1; font-size: 13px">
劝君更尽一杯酒，西出阳关无故人。
</p>
</tu-card>
</template>
</tu-timeline-item>
<tu-timeline-item>
送元二使安西
<template #label>
<tu-card effect="up" class="mt-2">
<p style="line-height: 1; font-size: 13px">
渭城朝雨浥轻尘，客舍青青柳色新。
</p>
<p style="line-height: 1; font-size: 13px">
劝君更尽一杯酒，西出阳关无故人。
</p>
</tu-card>
</template>
</tu-timeline-item>
</tu-timeline>
</template>Timeline API
Timeline Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| reverse | 是否倒序 | Boolean | false |
| direction | 时间轴方向 | String | vertical |
| mode | 时间轴的展示类型 | String | left |
| pending | 是否展示幽灵节点，设置为 true 时候只展示幽灵节点。传入ReactNode时，会作为节点内容展示。 | Boolean String | - |
| label-position | 设置标签文本的位置 | String | same |
Timeline Slots
| 参数名 | 描述 |
|---|---|
| dot | 幽灵节点 |
Timeline-Item API
Timeline-Item Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| dot-color | 节点颜色 | String | - |
| dot-type | 节点类型 | String | default |
| line-type | 时间轴类型 | String | solid |
| line-color | 时间轴颜色 | String | - |
| label | 标签文本 | String | - |
| position | Item位置 | String | - |
Timeline-Item Slots
| 参数名 | 描述 |
|---|---|
| dot | 自定义节点 |
| label | 自定义标签 |