更新记录

1.0.3(2024-06-18)

将upx改为px

1.0.2(2024-05-31)

1、修改样式; 2、修改使用说明

1.0.1(2024-05-30)

添加描述

查看更多

平台兼容性

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

column-steps:竖向步骤条组件

1、示例

<column-steps :options="list" :active="active"></column-steps>

2、数据源

const list = [{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]

3、参数如下

// 接收参数
defineProps({
    options: {  // 选传参数:iconsType图标类型,iconsSize图标大小
        type: [Array], default: () => []
    }, //数据源(必填)
    active: { type: Number, default: 0 },   // 激活的步骤,从0开始(必填)
    color: { type: String, default: 'rgb(0, 122, 255)' },   // 激活后的颜色(选填)
    titleField: { type: String, default: 'title' },     // 标题字段(选填)
    descField: { type: String, default: 'desc' },       // 描述字段(选填)
    iconsSize: { type: Number, default: 10 },           // 图标大小,会被单项iconsSize替换(选填)
    iconsActiveSize: { type: Number, default: 16 },     // 激活图标大小,会被单项iconsSize替换(选填)
    iconsType: { type: String, default: 'smallcircle-filled' }, //图标类型,会被单项iconsType替换(选填)
    iconsActiveType: { type: String, default: 'checkbox-filled' },  //激活图标类型,会被单项iconsType替换(选填)
});

4、默认插槽为描述,插槽返回数据为:data,标题插槽名称为:title

<column-steps :options="list" :active="active">
    <template v-slot="{data}">
        <view>审批时间:{{data.handleTime}}</view>
        <view>审批意见:{{data.handleContent}}</view>
        <view>{{data.desc}}</view>
    </template>
</column-steps>

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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