Sard Uniapp

Appearance

在新窗口打开⤴

Timeline时间轴1.6+

介绍 ​

垂直展示的时间流信息。

引入 ​

js
import Timeline from 'sard-uniapp/components/timeline/timeline.vue'
import TimelineItem from 'sard-uniapp/components/timeline-item/timeline-item.vue'

代码演示 ​

基础使用 ​

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

<script setup lang="ts">
const logistics = [
  {
    description: '收货地址：广东广州xxx1号店',
  },
  {
    icon: 'check',
    iconColor: 'var(--sar-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
<template>
  <sar-timeline>
    <sar-timeline-item
      v-for="(item, index) in logistics"
      :key="index"
      :title="item.title"
      :time="item.time"
      icon-family="demo-icons"
      :icon="item.icon"
      :icon-color="item.iconColor"
      :root-style="{
        color: index !== 1 ? 'var(--sar-tertiary-color)' : '',
      }"
    >
      <view v-if="item.tel">
        <template
          v-for="(subStr, i) in item.description.split(/(\${tel})/)"
          :key="i"
        >
          <text v-if="subStr === '${tel}'" style="color: var(--sar-primary)">
            {{ item.tel }}
          </text>
          <text v-else>{{ subStr }}</text>
        </template>
      </view>
      <template v-else>
        {{ item.description }}
      </template>
    </sar-timeline-item>
  </sar-timeline>
</template>

<script setup lang="js">
const logistics = [
  {
    description: "\u6536\u8D27\u5730\u5740\uFF1A\u5E7F\u4E1C\u5E7F\u5DDExxx1\u53F7\u5E97"
  },
  {
    icon: "check",
    iconColor: "var(--sar-primary)",
    title: "\u5DF2\u7B7E\u6536",
    description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u7531\u3010xxx\uFF08\u5E7F\u5DDExxx1\u53F7\u5E97\uFF09\u4EE3\u6536\u3002\u5982\u6709\u7591\u95EE\u60A8\u53EF\u4EE5\u8054\u7CFB\u914D\u9001\u5458\u3010xxx\uFF0C${tel}\u3011\u786E\u8BA4\u3002\u611F\u8C22\u60A8\u5728xxx\u8D2D\u7269\uFF0C\u6B22\u8FCE\u518D\u6B21\u5149\u4E34\u3002\u3011",
    tel: "13800138000",
    time: "2024-06-17 09:01:47"
  },
  {
    icon: "delivery",
    title: "\u6D3E\u9001\u4E2D",
    description: "\u60A8\u7684\u8BA2\u5355\u6B63\u5728\u914D\u9001\u9014\u4E2D\uFF08\u5FEB\u9012\u5458\uFF1Axxx\uFF0C\u7535\u8BDD${tel}\uFF09\uFF0C\u8BF7\u4F60\u8010\u5FC3\u7B49\u5F85\u3002",
    tel: "13800138000",
    time: "2024-06-17 08:01:25"
  },
  {
    icon: "transport",
    title: "\u8FD0\u8F93\u4E2D",
    description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u9001\u8FBE\u3010\u5E7F\u5DDExx\u8425\u4E1A\u90E8\u3011",
    time: "2024-06-17 06:21:23"
  },
  {
    description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u79BB\u5F00\u5E7F\u5DDExx\u5206\u62E3\u4E2D\u5FC3\uFF0C\u524D\u5F80\u5E7F\u5DDExx\u8425\u4E1A\u52A1\u9014\u4E2D",
    time: "2024-06-17 06:21:23"
  },
  {
    description: "\u60A8\u7684\u8BA2\u5355\u5728\u3010\u5E7F\u5DDExx\u5206\u62E3\u4E2D\u5FC3\u3011\u51C6\u5907\u9001\u5F80\u3010\u5E7F\u5DDExx\u8425\u4E1A\u90E8\u3011",
    time: "2024-06-17 04:27:51"
  },
  {
    description: "\u60A8\u7684\u8BA2\u5355\u5728\u3010\u5E7F\u5DDExx\u63A5\u8D27\u4ED3\u3011\u5206\u62E3\u5B8C\u6210",
    time: "2024-06-16 21:07:28"
  },
  {
    icon: "warehouse",
    title: "\u4ED3\u5E93\u5904\u7406\u4E2D",
    description: "\u6253\u5305\u5B8C\u6210",
    time: "2024-06-16 20:58:13"
  },
  {
    description: "\u626B\u63CF\u5B8C\u6210",
    time: "2024-06-16 20:58:13"
  },
  {
    description: "\u62E3\u8D27\u5B8C\u6210",
    time: "2024-06-16 19:18:06"
  },
  {
    description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u7ECF\u6253\u5370\u5B8C\u6210",
    time: "2024-06-16 18:53:15"
  },
  {
    icon: "order",
    title: "\u5DF2\u4E0B\u5355",
    description: "\u6E29\u99A8\u63D0\u793A\uFF1A\u60A8\u7684\u8BA2\u5355\u9884\u8BA16\u670817\u65E509:00-15:00\u9001\u8FBE",
    time: "2024-06-16 18:50:30"
  },
  {
    description: "\u60A8\u7684\u8BA2\u5355\u5DF2\u7ECF\u8FDB\u5165\u5E7F\u5DDE\u4ED3\u5E93\u51C6\u5907\u51FA\u5E93",
    time: "2024-06-16 18:20:49"
  },
  {
    description: "\u60A8\u7684\u8BA2\u5355\u9884\u8BA12024-06-16 18:20\u5F00\u59CB\u5904\u7406\uFF0C\u8BF7\u60A8\u8010\u5FC3\u7B49\u5F85",
    time: "2024-06-16 18:20:48"
  },
  {
    description: "\u60A8\u63D0\u4EA4\u4E86\u8BA2\u5355\uFF0C\u8BF7\u7B49\u5F85\u7CFB\u7EDF\u786E\u8BA4",
    time: "2021-06-16 18:20:30"
  }
];
</script>

API ​

TimelineProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-

TimelineSlots ​

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

TimelineItemProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
title标题内容string-
time时间内容string-
icon自定义图标string-
icon-family图标字体string-
icon-color图标颜色string-

TimelineItemSlots ​

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

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-timeline-item-header-width: 96rpx;

  --sar-timeline-item-line-width: 1px;
  --sar-timeline-item-line-dotted-before-height: 14rpx;
  --sar-timeline-item-line-color: var(--sar-border-color);

  --sar-timeline-item-icon-wrapper-margin-y: 6rpx;

  --sar-timeline-item-icon-font-size: 48rpx;
  --sar-timeline-item-icon-color: var(--sar-fourth-bg);

  --sar-timeline-item-dot-size: 16rpx;
  --sar-timeline-item-dot-bg: var(--sar-tertiary-bg);

  --sar-timeline-item-body-padding-top: 6rpx;
  --sar-timeline-item-body-padding-bottom: 48rpx;

  --sar-timeline-item-title-margin-bottom: 12rpx;
  --sar-timeline-item-title-font-size: var(--sar-text-lg);

  --sar-timeline-item-description-margin-bottom: 12rpx;
  --sar-timeline-item-description-font-size: var(--sar-text-base);

  --sar-timeline-item-time-font-size: var(--sar-text-sm);
  --sar-timeline-item-time-color: var(--sar-tertiary-color);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao