Vue Amazing UI

Appearance

时间轴 Timeline ​

垂直展示的时间流信息

何时使用 ​

  • 当有一系列信息需按时间排列时
  • 需要有一条时间轴进行视觉上的串联时

基本使用 ​

Create a services site 2023-05-24
Solve initial network problems 1 Solve initial network problems 2 2023-05-24
Technical testing 2023-05-24
Network problems being solved 2023-05-24
Network problems being solved 2
Show Code
vue
<script setup lang="ts"> import { ref } from 'vue' import type { TimelineItem } from 'vue-amazing-ui' const timelineItems = ref<TimelineItem[]>([  {  desc: 'Create a services site 2023-05-24',  color: 'green'  },  {  desc: 'Solve initial network problems 1 Solve initial network problems 2 2023-05-24',  color: 'red'  },  {  desc: 'Technical testing 2023-05-24',  color: 'blue'  },  {  desc: 'Network problems being solved 2023-05-24'  },  {  desc: 'Network problems being solved 2',  color: 'gray'  } ]) </script> <template>  <Timeline :items="timelineItems" /> </template>

自定义样式 ​

Create a services site 2023-05-24
Solve initial network problems 1 Solve initial network problems 2 2023-05-24

Create a services site

Network problems being solved 2023-05-24
Network problems being solved 2
Show Code
vue
<script setup lang="ts"> import { ref } from 'vue' import { ClockCircleOutlined } from '@ant-design/icons-vue' import type { TimelineItem } from 'vue-amazing-ui' const timelineItems = ref<TimelineItem[]>([  {  desc: 'Create a services site 2023-05-24',  color: 'green'  },  {  desc: 'Solve initial network problems 1 Solve initial network problems 2 2023-05-24',  color: 'red'  },  {  desc: 'Technical testing 2023-05-24',  color: 'blue'  },  {  desc: 'Network problems being solved 2023-05-24'  },  {  desc: 'Network problems being solved 2',  color: 'gray'  } ]) </script> <template>  <Timeline :items="timelineItems">  <template #dot="{ index }">  <span class="big-dot" v-if="index === 2"></span>  <ClockCircleOutlined v-if="index === 3" style="font-size: 16px; color: #1668dc; background: #fff; border-radius: 50%;" />  </template>  <template #desc="{ index }">  <p class="desc" v-if="index === 2">Create a services site</p>  </template>  </Timeline> </template> <style lang="less" scoped> .big-dot {  display: inline-block;  width: 18px;  height: 18px;  border: 4px solid #1677ff;  border-radius: 50%;  background: #FFF; } .desc {  font-size: 16px;  font-weight: 500; } </style>

使用虚线 ​

Create a services site 2023-05-24
Solve initial network problems 1 Solve initial network problems 2 2023-05-24
Technical testing 2023-05-24
Network problems being solved 2023-05-24
Network problems being solved 2
Show Code
vue
<script setup lang="ts"> import { ref } from 'vue' import type { TimelineItem } from 'vue-amazing-ui' const timelineItems = ref<TimelineItem[]>([  {  desc: 'Create a services site 2023-05-24',  color: 'green'  },  {  desc: 'Solve initial network problems 1 Solve initial network problems 2 2023-05-24',  color: 'red'  },  {  desc: 'Technical testing 2023-05-24',  color: 'blue'  },  {  desc: 'Network problems being solved 2023-05-24'  },  {  desc: 'Network problems being solved 2',  color: 'gray'  } ]) </script> <template>  <Timeline :items="timelineItems" line-style="dashed" /> </template>

右侧时间轴点 ​

Create a services site 2023-05-24
Solve initial network problems 1 Solve initial network problems 2 2023-05-24
Technical testing 2023-05-24
Network problems being solved 2023-05-24
Network problems being solved 2
Show Code
vue
<script setup lang="ts"> import { ref } from 'vue' import type { TimelineItem } from 'vue-amazing-ui' const timelineItems = ref<TimelineItem[]>([  {  desc: 'Create a services site 2023-05-24',  color: 'green'  },  {  desc: 'Solve initial network problems 1 Solve initial network problems 2 2023-05-24',  color: 'red'  },  {  desc: 'Technical testing 2023-05-24',  color: 'blue'  },  {  desc: 'Network problems being solved 2023-05-24'  },  {  desc: 'Network problems being solved 2',  color: 'gray'  } ]) </script> <template>  <Timeline :items="timelineItems" mode="right" /> </template>

中间时间轴点 ​

内容从左边开始交替展现


Create a services site 2023-05-24
Solve initial network problems 1 Solve initial network problems 2 2023-05-24
Technical testing 2023-05-24
Network problems being solved 2023-05-24
Network problems being solved 2
Show Code
vue
<script setup lang="ts"> import { ref } from 'vue' import type { TimelineItem } from 'vue-amazing-ui' const timelineItems = ref<TimelineItem[]>([  {  desc: 'Create a services site 2023-05-24',  color: 'green'  },  {  desc: 'Solve initial network problems 1 Solve initial network problems 2 2023-05-24',  color: 'red'  },  {  desc: 'Technical testing 2023-05-24',  color: 'blue'  },  {  desc: 'Network problems being solved 2023-05-24'  },  {  desc: 'Network problems being solved 2',  color: 'gray'  } ]) </script> <template>  <Timeline :items="timelineItems" mode="center">  <template #dot="{ index }">  <span class="big-dot" v-if="index===2"></span>  </template>  </Timeline> </template>

内容从右边开始交替展现


Create a services site 2023-05-24
Solve initial network problems 1 Solve initial network problems 2 2023-05-24
Technical testing 2023-05-24
Network problems being solved 2023-05-24
Network problems being solved 2
Show Code
vue
<script setup lang="ts"> import { ref } from 'vue' import type { TimelineItem } from 'vue-amazing-ui' const timelineItems = ref<TimelineItem[]>([  {  desc: 'Create a services site 2023-05-24',  color: 'green'  },  {  desc: 'Solve initial network problems 1 Solve initial network problems 2 2023-05-24',  color: 'red'  },  {  desc: 'Technical testing 2023-05-24',  color: 'blue'  },  {  desc: 'Network problems being solved 2023-05-24'  },  {  desc: 'Network problems being solved 2',  color: 'gray'  } ]) </script> <template>  <Timeline :items="timelineItems" mode="center" position="right">  <template #dot="{ index }">  <span class="big-dot" v-if="index===2"></span>  </template>  </Timeline> </template>

APIs ​

Timeline ​

参数说明类型默认值
items时间轴内容数组Item[][]
width时间轴区域总宽度，单位 pxnumber | string'100%'
lineStyle时间线样式'solid' | 'dashed' | 'dotted''solid'
mode通过设置 mode 可以改变时间轴和内容的相对位置'left' | 'center' | 'right''left'
position当 mode 为 center 时，内容交替展现，内容从左边（left）开始或者右边（right）开始展现'left' | 'right''left'

Item Type ​

名称说明类型默认值
desc文字描述string | slotundefined
color?圆圈颜色'blue' | 'green' | 'red' | 'gray' | string'blue'

Slots ​

名称说明类型
dot自定义时间轴点v-slot:dot="{ item, index }"
desc自定义文字描述v-slot:desc="{ item, index }"