介绍

垂直展示的时间流信息。

代码演示

基础使用

vue ts

<template>
  <s-timeline>
    <s-timeline-item
      v-for="(item, index) in logistics"
      :key="index"
      :title="item.title"
      :time="item.time"
      :style="{
        color: index !== 1 ? 'var(--s-text-color-tertiary)' : '',
      }"
    >
      <template v-if="item.icon" #icon>
        <demo-icon :name="item.icon" :color="item.iconColor" />
      </template>
      <div v-if="item.tel">
        <template v-for="(subStr, i) in item.description.split(/(\${tel})/)" :key="i">
          <span v-if="subStr === '${tel}'" style="color: var(--s-color-primary)">
            {{ item.tel }}
          </span>
          <span v-else>{{ subStr }}</span>
        </template>
      </div>
      <template v-else>
        {{ item.description }}
      </template>
    </s-timeline-item>
  </s-timeline>
</template>

<script setup lang="ts">
const logistics = [
  {
    description: '收货地址：广东广州xxx1号店',
  },
  {
    icon: 'check',
    iconColor: 'var(--s-color-primary)',
    title: '已签收',
    description:
      '您的订单已由【xxx（广州xxx1号店）代收。如有疑问您可以联系配送员【xxx，${tel}】确认。感谢您在xxx购物，欢迎再次光临。】',
    tel: '13800138000',
    time: '2024-06-17 09:01:47',
  },
  {
    icon: 'delivery',
    title: '派送中',
    description: '您的订单正在配送途中（快递员：xxx，电话${tel}），请你耐心等待。',
    tel: '13800138000',
    time: '2024-06-17 08:01:25',
  },
  {
    icon: 'transport',
    title: '运输中',
    description: '您的订单已送达【广州xx营业部】',
    time: '2024-06-17 06:21:23',
  },
  {
    description: '您的订单已离开广州xx分拣中心，前往广州xx营业务途中',
    time: '2024-06-17 06:21:23',
  },
  {
    description: '您的订单在【广州xx分拣中心】准备送往【广州xx营业部】',
    time: '2024-06-17 04:27:51',
  },
  {
    description: '您的订单在【广州xx接货仓】分拣完成',
    time: '2024-06-16 21:07:28',
  },
  {
    icon: 'warehouse',
    title: '仓库处理中',
    description: '打包完成',
    time: '2024-06-16 20:58:13',
  },
  {
    description: '扫描完成',
    time: '2024-06-16 20:58:13',
  },
  {
    description: '拣货完成',
    time: '2024-06-16 19:18:06',
  },
  {
    description: '您的订单已经打印完成',
    time: '2024-06-16 18:53:15',
  },
  {
    icon: 'order',
    title: '已下单',
    description: '温馨提示：您的订单预计6月17日09:00-15:00送达',
    time: '2024-06-16 18:50:30',
  },
  {
    description: '您的订单已经进入广州仓库准备出库',
    time: '2024-06-16 18:20:49',
  },
  {
    description: '您的订单预计2024-06-16 18:20开始处理，请您耐心等待',
    time: '2024-06-16 18:20:48',
  },
  {
    description: '您提交了订单，请等待系统确认',
    time: '2021-06-16 18:20:30',
  },
]
</script>

vue js

<template>
  <s-timeline>
    <s-timeline-item
      v-for="(item, index) in logistics"
      :key="index"
      :title="item.title"
      :time="item.time"
      :style="{
        color: index !== 1 ? 'var(--s-text-color-tertiary)' : '',
      }"
    >
      <template v-if="item.icon" #icon>
        <demo-icon :name="item.icon" :color="item.iconColor" />
      </template>
      <div v-if="item.tel">
        <template v-for="(subStr, i) in item.description.split(/(\${tel})/)" :key="i">
          <span v-if="subStr === '${tel}'" style="color: var(--s-color-primary)">
            {{ item.tel }}
          </span>
          <span v-else>{{ subStr }}</span>
        </template>
      </div>
      <template v-else>
        {{ item.description }}
      </template>
    </s-timeline-item>
  </s-timeline>
</template>

<script setup lang="js">
const logistics = [
  { description: '收货地址：广东广州xxx1号店' },
  {
    icon: 'check',
    iconColor: 'var(--s-color-primary)',
    title: '已签收',
    description:
      '您的订单已由【xxx（广州xxx1号店）代收。如有疑问您可以联系配送员【xxx，${tel}】确认。感谢您在xxx购物，欢迎再次光临。】',
    tel: '13800138000',
    time: '2024-06-17 09:01:47',
  },
  {
    icon: 'delivery',
    title: '派送中',
    description: '您的订单正在配送途中（快递员：xxx，电话${tel}），请你耐心等待。',
    tel: '13800138000',
    time: '2024-06-17 08:01:25',
  },
  {
    icon: 'transport',
    title: '运输中',
    description: '您的订单已送达【广州xx营业部】',
    time: '2024-06-17 06:21:23',
  },
  {
    description: '您的订单已离开广州xx分拣中心，前往广州xx营业务途中',
    time: '2024-06-17 06:21:23',
  },
  {
    description: '您的订单在【广州xx分拣中心】准备送往【广州xx营业部】',
    time: '2024-06-17 04:27:51',
  },
  {
    description: '您的订单在【广州xx接货仓】分拣完成',
    time: '2024-06-16 21:07:28',
  },
  {
    icon: 'warehouse',
    title: '仓库处理中',
    description: '打包完成',
    time: '2024-06-16 20:58:13',
  },
  {
    description: '扫描完成',
    time: '2024-06-16 20:58:13',
  },
  {
    description: '拣货完成',
    time: '2024-06-16 19:18:06',
  },
  {
    description: '您的订单已经打印完成',
    time: '2024-06-16 18:53:15',
  },
  {
    icon: 'order',
    title: '已下单',
    description: '温馨提示：您的订单预计6月17日09:00-15:00送达',
    time: '2024-06-16 18:50:30',
  },
  {
    description: '您的订单已经进入广州仓库准备出库',
    time: '2024-06-16 18:20:49',
  },
  {
    description: '您的订单预计2024-06-16 18:20开始处理，请您耐心等待',
    time: '2024-06-16 18:20:48',
  },
  {
    description: '您提交了订单，请等待系统确认',
    time: '2021-06-16 18:20:30',
  },
]
</script>

API

TimelineProps

属性	描述	类型	默认值

TimelineSlots

插槽	描述	属性
default	自定义默认内容	-

TimelineItemProps

属性	描述	类型	默认值
title	标题内容	string	-
time	时间内容	string	-

TimelineItemSlots

插槽	描述	属性
default	自定义默认内容	-
icon	自定义图标内容，会覆盖 icon 属性	-
title	自定义标题内容，会覆盖 title 属性	-
time	自定义时间内容，会覆盖 time 属性	-

主题定制

样式变量

CSS 变量	值
--s-timeline-item-header-width	48px
--s-timeline-item-line-width	1px
--s-timeline-item-line-dotted-before-height	7px
--s-timeline-item-line-color	var(--s-border-color)
--s-timeline-item-icon-wrapper-margin-y	3px
--s-timeline-item-icon-font-size	24px
--s-timeline-item-icon-color	var(--s-fill-color)
--s-timeline-item-dot-size	8px
--s-timeline-item-dot-bg	var(--s-fill-color-secondary)
--s-timeline-item-body-padding-top	3px
--s-timeline-item-body-padding-bottom	24px
--s-timeline-item-title-margin-bottom	6px
--s-timeline-item-title-font-size	var(--s-font-size-lg)
--s-timeline-item-description-margin-bottom	6px
--s-timeline-item-description-font-size	var(--s-font-size)
--s-timeline-item-time-font-size	var(--s-font-size-sm)
--s-timeline-item-time-color	var(--s-text-color-tertiary)