更新记录

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>

数据格式

数据格式为数组嵌套数组的形式，值得注意的是需要在第一层数组中定义action属性，用于展现节点是否处于激活状态。 在使用插槽的情况下，可根据情况自定义数据属性。

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插槽时自定义的属性，可根据需要定义任何数据
            }
        ],
        action: 1 // 不可自定义，作为节点激活状态的标记。为0或不提供时，节点为非激活状态。
    }
]);