Skip to content

feat(steps): 实现 Steps 步骤条组件 #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skiyee wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(steps): 实现 Steps 步骤条组件 #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 111 additions & 0 deletions examples/uni/src/pages-info/steps/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<script setup lang="ts">
import { ref } from 'vue'

const active = ref(0)

function next() {
if (active.value < 3) {
active.value++
}
}

function prev() {
if (active.value > 0) {
active.value--
}
}
</script>

<template>
<view class="page">
<view class="demo-section">
<view class="demo-title">
基础用法
</view>
<view class="demo-desc">
默认横向步骤条，通过 v-model:active 控制当前步骤
</view>

<SkSteps v-model:active="active">
<SkStep title="步骤一" />
<SkStep title="步骤二" />
<SkStep title="步骤三" />
<SkStep title="步骤四" />
</SkSteps>

<view class="demo-actions">
<SkButton size="small" @click="prev">
上一步
</SkButton>
<SkButton type="primary" size="small" @click="next">
下一步
</SkButton>
</view>
</view>

<view class="demo-section">
<view class="demo-title">
带描述的步骤条
</view>
<view class="demo-desc">
为步骤添加描述信息
</view>

<SkSteps :active="1">
<SkStep title="已完成" description="这是步骤的描述信息" />
<SkStep title="进行中" description="这是步骤的描述信息" />
<SkStep title="待进行" description="这是步骤的描述信息" />
</SkSteps>
</view>

<view class="demo-section">
<view class="demo-title">
自定义状态
</view>
<view class="demo-desc">
可以通过 status 属性覆盖步骤状态
</view>

<SkSteps :active="1">
<SkStep title="步骤一" status="finish" />
<SkStep title="步骤二" status="error" />
<SkStep title="步骤三" status="wait" />
</SkSteps>
</view>
</view>
</template>

<style scoped>
.page {
padding: 32rpx;
background: #f5f5f5;
min-height: 100vh;
}

.demo-section {
margin-bottom: 32rpx;
padding: 32rpx;
background: #fff;
border-radius: 16rpx;
}

.demo-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}

.demo-desc {
font-size: 28rpx;
color: #666;
margin-bottom: 32rpx;
}

.demo-actions {
display: flex;
gap: 16rpx;
margin-top: 32rpx;
justify-content: center;
}
</style>
108 changes: 108 additions & 0 deletions examples/uni/src/pages-info/steps/clickable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<script setup lang="ts">
import { ref } from 'vue'

const active1 = ref(1)
const active2 = ref(2)

function handleStepClick(_index: number) {
// 步骤点击事件处理
}
</script>

<template>
<view class="page">
<view class="demo-section">
<view class="demo-title">
可点击的步骤条
</view>
<view class="demo-desc">
设置 clickable 属性使步骤可点击切换
</view>

<SkSteps v-model:active="active1" @click-step="handleStepClick">
<SkStep title="步骤一" clickable />
<SkStep title="步骤二" clickable />
<SkStep title="步骤三" clickable />
<SkStep title="步骤四" clickable />
</SkSteps>

<view class="demo-info">
当前步骤: {{ active1 + 1 }}
</view>
</view>

<view class="demo-section">
<view class="demo-title">
部分步骤可点击
</view>
<view class="demo-desc">
只有部分步骤可以点击
</view>

<SkSteps v-model:active="active2">
<SkStep title="步骤一" clickable description="可点击" />
<SkStep title="步骤二" description="不可点击" />
<SkStep title="步骤三" clickable description="可点击" />
<SkStep title="步骤四" description="不可点击" />
</SkSteps>

<view class="demo-info">
当前步骤: {{ active2 + 1 }}
</view>
</view>

<view class="demo-section">
<view class="demo-title">
纵向可点击
</view>
<view class="demo-desc">
纵向步骤条也支持点击切换
</view>

<SkSteps v-model:active="active1" direction="vertical">
<SkStep title="选择商品" clickable description="浏览并选择心仪的商品" />
<SkStep title="确认订单" clickable description="确认商品信息和收货地址" />
<SkStep title="支付订单" clickable description="选择支付方式完成支付" />
<SkStep title="完成" clickable description="等待商品发货" />
</SkSteps>
</view>
</view>
</template>

<style scoped>
.page {
padding: 32rpx;
background: #f5f5f5;
min-height: 100vh;
}

.demo-section {
margin-bottom: 32rpx;
padding: 32rpx;
background: #fff;
border-radius: 16rpx;
}

.demo-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}

.demo-desc {
font-size: 28rpx;
color: #666;
margin-bottom: 32rpx;
}

.demo-info {
margin-top: 32rpx;
padding: 24rpx;
background: #f5f5f5;
border-radius: 12rpx;
font-size: 28rpx;
color: #666;
text-align: center;
}
</style>
Loading