更新记录
1.0.0(2024-10-05)
下载此版本
第一次提交
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
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或不提供时,节点为非激活状态。
}
]);