更新记录

1.2.0（2025-08-11） 下载此版本

免费

1.1.1（2025-08-01） 下载此版本

升级

1.0.0（2025-03-06） 下载此版本

发布

平台兼容性

uni-app(4.07)

其他

方便您的同时，请五星、收藏，让好的东西照亮更多深渊中负重前行的代码人。

创作不易，在您方便之际，赞赏作者，我们会更有动力继续下去。

简介

ljs-steps-vue3，灵活的步骤组件、时间轴组件。它是灵活的，你也可以把应用在很多场景。

使用 uni_modules 安装（推荐）

使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 ljs-steps-vue3组件。

主参数

stepOpts参数

插槽

快速应用

示例1

<ljs-steps-vue3 :data="data">
    <template #default="{row}">
        <view class="item">
            <view class="date">{{ row.date }}</view>
            <view class="info">{{ row.info }}</view>
            <view class="dis">这是一个步骤展示器，可以展示每个步骤的数据。它是灵活的，你也可以把它当做时间树。</view>
        </view>
    </template>
</ljs-steps-vue3>

export default {
    data() {
        return {
            opts: {
                dotSize: 22, // 大小
                dotRadius: '0', // 圆角
                dotColor: 'red', // 颜色
                lineSize: 8 // 大小
            },
            data: [
                {
                    date: '2024-07-01',
                    info: '完成10个俯卧撑！',
                },
                {
                    date: '2024-07-02',
                    info: '完成20个俯卧撑！',
                },
                {
                    date: '2024-07-03',
                    info: '完成30个俯卧撑！',
                },
                {
                    date: '2024-07-04',
                    info: '完成40个俯卧撑！',
                }
            ]
        }
    }
}

.date{
    line-height: 40upx;
    font-size: 32upx;
}
.info{
    line-height: 40upx;
    font-size: 28upx;
    color: #333;
}
.dis{
    line-height: 40upx;
    font-size: 22upx;
    color: rgba(#324A59, .5);
}

贡献代码

龙九山。有任何问题，请在平台留言，在手头宽裕得情况下，我会尽快修复问题。