b553c4e519
- API 路由统一: 移除 /api/h5/，统一 /api/pms/ 入口 - 二进制改名: api-server -> pms-api（与服务名一致） - nginx: 合并 /api/ + /pms/api/ 为 /api/pms/ - 新增 docs/API.md 接口文档 - 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段 - Redis 管道批量读取仓体实时数据（SOC/电压/电流/功率） - DB: 所有 TIMESTAMP 列改为 DATETIME（修复类型不匹配） - 用户管理: 新增创建时间/修改时间列，状态改用 Switch - 角色管理/用户管理: 操作按钮改为图标 - PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址 - PC 卡片: 通道统计改用 Lucide 图标，颜色统一 - PC 二维码: canvas 渲染，含编号文字，支持右键下载 - H5: 按 uni-app 规范修正导航（navigateTo 替代 reLaunch） - H5: 详情页加返回导航条 - H5: 扫码支持摄像头（jsQR）+ ?id= 参数 - H5: 底部 tabBar 在所有页面常显 - H5: 首页统计改为 6 项（设备/通道/空闲/充电/充满/故障） - H5: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件，补充缺失规范章节
3.2 KiB
3.2 KiB
category
| category |
|---|
| Utilities |
useStepper
Provides helpers for building a multi-step wizard interface.
Usage
Steps as array
import { useStepper } from '@vueuse/core'
const {
steps,
stepNames,
index,
current,
next,
previous,
isFirst,
isLast,
goTo,
goToNext,
goToPrevious,
goBackTo,
isNext,
isPrevious,
isCurrent,
isBefore,
isAfter,
} = useStepper([
'billing-address',
'terms',
'payment',
])
// Access the step through `current`
console.log(current.value) // 'billing-address'
Steps as object
import { useStepper } from '@vueuse/core'
const {
steps,
stepNames,
index,
current,
next,
previous,
isFirst,
isLast,
goTo,
goToNext,
goToPrevious,
goBackTo,
isNext,
isPrevious,
isCurrent,
isBefore,
isAfter,
} = useStepper({
'user-information': {
title: 'User information',
},
'billing-address': {
title: 'Billing address',
},
'terms': {
title: 'Terms',
},
'payment': {
title: 'Payment',
},
})
// Access the step object through `current`
console.log(current.value.title) // 'User information'
Type Declarations
export interface UseStepperReturn<StepName, Steps, Step> {
/** List of steps. */
steps: Readonly<Ref<Steps>>
/** List of step names. */
stepNames: Readonly<Ref<StepName[]>>
/** Index of the current step. */
index: Ref<number>
/** Current step. */
current: ComputedRef<Step>
/** Next step, or undefined if the current step is the last one. */
next: ComputedRef<StepName | undefined>
/** Previous step, or undefined if the current step is the first one. */
previous: ComputedRef<StepName | undefined>
/** Whether the current step is the first one. */
isFirst: ComputedRef<boolean>
/** Whether the current step is the last one. */
isLast: ComputedRef<boolean>
/** Get the step at the specified index. */
at: (index: number) => Step | undefined
/** Get a step by the specified name. */
get: (step: StepName) => Step | undefined
/** Go to the specified step. */
goTo: (step: StepName) => void
/** Go to the next step. Does nothing if the current step is the last one. */
goToNext: () => void
/** Go to the previous step. Does nothing if the current step is the previous one. */
goToPrevious: () => void
/** Go back to the given step, only if the current step is after. */
goBackTo: (step: StepName) => void
/** Checks whether the given step is the next step. */
isNext: (step: StepName) => boolean
/** Checks whether the given step is the previous step. */
isPrevious: (step: StepName) => boolean
/** Checks whether the given step is the current step. */
isCurrent: (step: StepName) => boolean
/** Checks if the current step is before the given step. */
isBefore: (step: StepName) => boolean
/** Checks if the current step is after the given step. */
isAfter: (step: StepName) => boolean
}
export declare function useStepper<T extends string | number>(
steps: MaybeRef<T[]>,
initialStep?: T,
): UseStepperReturn<T, T[], T>
export declare function useStepper<T extends Record<string, any>>(
steps: MaybeRef<T>,
initialStep?: keyof T,
): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>