更新记录

1.0.0（2025-04-01） 下载此版本

无

平台兼容性

wl-steps 组件使用指南

组件概述

wl-steps 是一个用于展示流程状态的步骤条组件，支持反向渲染和高亮指定步骤。

基本用法

<template>
  <wl-steps :list="list" :oldValue="oldValue" />
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      // 步骤数据（注意顺序为从最新到最旧）
        list: [
            { status: '代取件', time: '2024-11-29 15:40:23', description: '快件已送达菜鸟驿站，凭取件码【10-2-1020】取件，请及时取件，如有疑问请联系150******' },
            { status: '派送中', time: '2024-11-29 15:40:23', description: '快件已到达投揽部，等待派件' },
            { status: '运输中', time: '2024-11-29 15:40:23', description: '快件离开仓库，已发往下一站' },
            { status: '已揽件', time: '2024-11-29 15:40:23', description: '邮政快递 已收取快件' },
            { status: '已发货', time: '2024-11-29 15:40:23', description: '等待揽收中' },
            { status: '已下单', time: '2024-11-29 15:40:23', description: '商品已经下单' }
        ],
      // 需要高亮的步骤索引
        oldValue: [3,4,5],
    });

    return { ...state };
  }
};
</script>