更新记录

1.0.2（2024-11-27） 下载此版本

1、新增了一些事件； 2、新增了悬浮按钮

1.0.1（2024-11-27） 下载此版本

1、去除action字段/属性，节点状态——0-未开始，1-进行中，2-已完成，节点状态的控制由节点中的子项目的状态自动控制，即当所有子项目都为true状态，则节点的状态为已完成，都为false，则节点的状态为未开始，否则为进行中。 2、数据items中的子项目属性增加status字段/属性，用于标记子项目的状态。

1.0.0（2024-10-05） 下载此版本

第一次提交

平台兼容性

piao-step

使用插槽：

推荐仅使用item-content插槽，如

<template>
    <view>
        <piao-step :localData="stepData">

            <!-- 使用header插槽，通过node获取节点所有数据 -->
            <template v-slot:header="{ node }">
                <h3>{{ node.title }}</h3>
            </template>

            <!-- 使用content插槽，通过items获取节点内容数据， -->
            <template v-slot:content="{ items }">
                <view v-for="item in items">
                    {{ item.src }}
                    <uni-icons type="trash-filled" color="#dd524d" size="30"></uni-icons>
                </view>
            </template>

            <!-- 使用item-content插槽，通过item获取content项的数据。
             注意：当使用了content插槽时，item-content插槽将不会生效 -->
            <template v-slot:item-content="{ item }">
                <view
                    style="display: flex; flex-direction: column"
                    v-for="e in item.cardlist"
                >
                    <text style="color: aqua">{{ e }}</text>
                </view>
            </template>
        </piao-step>
    </view>
</template>

数据格式

数据格式为数组嵌套数组的形式，子项目items中，增加status属性，用于标记子项目的状态。 在使用插槽的情况下，可根据情况自定义数据属性。

const stepData = ref([
    {
        title: '我是标题',// 非必填，不使用header插槽时，组件可展现此属性
        note: '我是副标题',// 非必填，不使用header插槽时，组件可展现此属性
        items: [
            {
                title: '我是节点项1', // 非必填，不使用content插槽时，组件可展现此属性
                info: '我是扩展信息', // 非必填，不使用content插槽时，组件可展现此属性
                text: '我卡拉圣诞节风口浪尖，我可以是一段很长的文本', // 非必填，不使用content插槽时，组件可展现此属性
                src: '/pages/name/age', // 非必填，使用content插槽时自定义任何数据
                cardlist: ['节点内容中自定义插槽列表第1行', '节点内容中自定义插槽列表第2行', '节点内容中自定义插槽列表第3行'], // 自定义，使用item-content插槽时自定义的属性，可根据需要定义任何数据
                status: true //非必填，默认为false。子项目状态，只有完成true和未完成false两种状态，当所有的子项目为true时，节点显示完成，部分为true,部分为false时，节点显示
                为进行中，都为false时，节点显示为未开始。如果不提供此属性，则无法通过子项目的状态实现节点状态的展示。
            }
        ],

    }
]);

事件

• clickHeader：点击节点头部，返回数据：{ node, node_index }
• clickItem：点击节点中子项目，返回数据：{ item, node_index, item_index }
• onCreated：点击页面新增节点按钮，无返回值，仅提供一个触发事件。
• onClick：点击节点，返回数据：{ node, node_index }

  node——节点数据；node_index——节点序号；item_index——子项目序号

属性

• localData：组件数据
• addBTN：是否展示悬浮按钮，用于提供触发事件。