更新记录

1.0.3(2023-03-20)

使用说明更新

1.0.2(2023-03-20)

多样化支持

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

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

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

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

如使用过程中有问题或有一些好的建议,欢迎qq联系:2364518038

使用方式(uni_modules版本)

<liu-step-bar :step="step" :stepList="stepList" @clickStep="clickStep"></liu-step-bar>
export default {
    data() {
        return {
            step: 1, //当前步骤
            stepList: [{
                name: '第一步',
                id: 1
            }, {
                name: '第二步',
                id: 2
            }, {
                name: '第三步',
                id: 3
            }], //步骤列表
        };
    },
    methods: {
        //点击步骤
        clickStep(e){
            this.step = e.id
            console.log('============:', e)
        }
    }
}

属性说明

名称 类型 默认值 描述
step Number 1 当前步骤
stepList Array [] 步骤信息
checkedImg String checkedImg 已完成的图片路径
unCheckedImg String unCheckedImg 未完成的图片路径
checkedColor String #287BF8 已完成的字体颜色
unCheckedColor String #333333 未完成的字体颜色
checkedLine String #287BF8 已完成的线条颜色
unCheckedLine String #bebebe 未完成的线条颜色

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问