更新记录

1.0.7（2023-06-13） 下载此版本

增加预览二维码

1.0.6（2023-04-14） 下载此版本

增加示例

1.0.5（2023-03-31） 下载此版本

优化

平台兼容性

uni-app

liu-step-bar适用于uni-app项目的步骤条组件

本组件目前兼容微信小程序、H5

本组件支持自定义步骤内容、步骤回显、点击

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

使用示例

<template>
    <view class="page-main">
        <view class="step">
            <liu-step-bar :stepList="stepList" @clickStep="clickStep"></liu-step-bar>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                stepList: [{
                    name: '第一步',
                    id: 1
                }, {
                    name: '第二步',
                    id: 2
                }, {
                    name: '第三步',
                    id: 3
                }], //步骤列表
            }
        },
        onLoad() {

        },
        methods: {
            //点击步骤
            clickStep(e) {
                console.log('所点击步骤信息:', e)
            }
        }
    }
</script>

<style lang="scss">
    .page-main {
        height: auto;

        .step {
            margin-top: 30rpx;
            padding: 0 30rpx;
        }
    }
</style>

属性说明