更新记录

1.0.0(2024-11-16) 下载此版本

新组件发布


平台兼容性

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

hbxw-steps步骤展示组件

介绍

步骤组件,展示事情哪一步正在进行中,已完成了哪一步,有哪些待完成的步骤

使用示例


<template>
    <view class="hbxw-steps-wrap">
        <hbxw-steps :progress="progress"></hbxw-steps>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                progress: [
                  {
                    name: '步骤1已完成',
                    content: '从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜',
                    progress: 'done'
                  },{
                    name: '步骤2正在进行',
                    content: '好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜',
                    progress: 'ing'
                  },{
                    name: '步骤3',
                    content: '从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜,从前从前有个人爱你很久,但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜',
                    progress: 'undo'
                  },{
                    name: '步骤4',
                    content: '但偏偏风渐渐把距离吹得好远,好不容易又能再多爱一天,但故事的最后你好像还是说了拜拜',
                    progress: 'undo'
                  }
                ]
            }
        },
        methods: {
        }
    }
</script>

<style>
.hbxw-steps-wrap{
  padding: 26rpx 24rpx;
}
</style>

API

Props

属性名 类型 默认值 必填 说明
progress Array null 步骤数据,数据结构见示例
pointSize String/Number 22rpx 圆点尺寸
lineWidth String/Number 4rpx 线条宽度
undoColor String '#ACACAC' 待完成颜色
ingColor String '#77984C' 进行中颜色
doneColor String '#333333' 已完成颜色

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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