更新记录

1.0.0（2024-12-04） 下载此版本

有问题请联系作者

平台兼容性

使用示例

<template>
  <view>

    <!-- 基础用法 -->
    <sh-steps :options="options"></sh-steps>

    <!-- 展开更多 -->
    <sh-steps :options="options" showMore></sh-steps>

    <!-- 配置左边进度图标 -->
    <sh-steps :options="options" iconType="round" showMore></sh-steps>

    <!-- 当前进度颜色 -->
    <sh-steps :options="options" activeColor="#6c5ce7" iconType="round" showMore></sh-steps>

    <!-- 使用插槽 -->
    <sh-steps :options="options2" activeColor="#6c5ce7">
      <template #content="{ data }">
        <view style="font-size: 24rpx;color: #999;margin-bottom: 10rpx;">{{data.title}}</view>
        <view style="padding: 20rpx;background: #fff;border-radius: 24rpx;">
          <view style="font-size: 32rpx;margin-bottom: 10rpx;">{{data.subtitle}}</view>
          <view style="color: gray;font-size: 28rpx;">{{data.content}}</view>
        </view>
      </template>
    </sh-steps>

  </view>
</template>

<script >
export default {
  data() {
    return {
      options: [
        {
          title: '步骤1',
          desc: '2024-12-04 08:03:56',
        },
        {
          title: '步骤2',
          desc: '2024-12-04 08:16:43',
        },
        {
          title: '步骤3',
          desc: '2024-12-04 08:23:32',
        },
        {
          title: '步骤4',
          desc: '2024-12-04 08:32:12',
        },
        {
          title: '步骤5',
          desc: '2024-12-04 08:48:43',
        },
        {
          title: '步骤6',
          desc: '2024-12-04 08:56:54',
        },
      ],
      options2: [
        {
          title: '3小时前',
          subtitle: '主要内容',
          content: '自定义内容区域'
        },
        {
          title: '昨天21:09',
          subtitle: '主要内容',
          content: '自定义内容区域'
        },
        {
          title: '昨天18:59',
          subtitle: '主要内容',
          content: '自定义内容区域'
        },
        {
          title: '昨天18:25',
          subtitle: '主要内容',
          content: '自定义内容区域'
        },
        {
          title: '昨天17:56',
          subtitle: '主要内容',
          content: '自定义内容区域'
        },
        {
          title: '昨天16:09',
          subtitle: '主要内容',
          content: '自定义内容区域'
        },
      ]
    }
  }
}
</script>

属性 Porps

类型 Option

插槽 Slots