useStepper

类别

Utilities

导出体积

392 B

上次更改

last month

提供构建多步骤向导界面的辅助工具。

示例

源码 playground (beta)

表单

{
  "firstName": "Jon",
  "lastName": "",
  "billingAddress": "",
  "contractAccepted": false,
  "carbonOffsetting": false,
  "payment": "credit-card"
}

向导

{
  "steps": {
    "user-information": {
      "title": "User information"
    },
    "billing-address": {
      "title": "Billing address"
    },
    "terms": {
      "title": "Terms"
    },
    "payment": {
      "title": "Payment"
    }
  },
  "stepNames": [
    "user-information",
    "billing-address",
    "terms",
    "payment"
  ],
  "index": 0,
  "current": {
    "title": "User information"
  },
  "next": "billing-address",
  "isFirst": true,
  "isLast": false
}

用法

步骤作为数组

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',
])

// 通过 `current` 访问步骤
console
.log
(current
.value
) // 'billing-address'

步骤作为对象

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
: '用户信息',
  },
  'billing-address': {
    title
: '账单地址',
  },
  'terms': {
    title
: '条款',
  },
  'payment': {
    title
: '支付',
  },
})

// 通过 `current` 访问步骤对象
console
.log
(current
.value
.title
) // '用户信息'

类型声明

显示类型声明

export interface UseStepperReturn
<StepName
, Steps
, Step
> {
  /** 步骤列表。 */
  steps
: Readonly
<Ref
<Steps
>>
  /** 步骤名称列表。 */
  stepNames
: Readonly
<Ref
<StepName
[]>>
  /** 当前步骤的索引。 */
  index
: Ref
<number>
  /** 当前步骤。 */
  current
: ComputedRef
<Step
>
  /** 下一个步骤，如果当前步骤是最后一个则为 undefined。 */
  next
: ComputedRef
<StepName
 | undefined>
  /** 上一个步骤，如果当前步骤是第一个则为 undefined。 */
  previous
: ComputedRef
<StepName
 | undefined>
  /** 当前步骤是否为第一个。 */
  isFirst
: ComputedRef
<boolean>
  /** 当前步骤是否为最后一个。 */
  isLast
: ComputedRef
<boolean>
  /** 获取指定索引处的步骤。 */
  at
: (index
: number) => Step
 | undefined
  /** 根据指定名称获取步骤。 */
  get
: (step
: StepName
) => Step
 | undefined
  /** 跳转至指定步骤。 */
  goTo
: (step
: StepName
) => void
  /** 跳转至下一个步骤。如果当前步骤是最后一个，则不执行任何操作。 */
  goToNext
: () => void
  /** 跳转至上一个步骤。如果当前步骤是第一个，则不执行任何操作。 */
  goToPrevious
: () => void
  /** 回到给定步骤，仅当当前步骤在之后时执行。 */
  goBackTo
: (step
: StepName
) => void
  /** 检查给定步骤是否为下一个步骤。 */
  isNext
: (step
: StepName
) => boolean
  /** 检查给定步骤是否为上一个步骤。 */
  isPrevious
: (step
: StepName
) => boolean
  /** 检查给定步骤是否为当前步骤。 */
  isCurrent
: (step
: StepName
) => boolean
  /** 检查当前步骤是否在给定步骤之前。 */
  isBefore
: (step
: StepName
) => boolean
  /** 检查当前步骤是否在给定步骤之后。 */
  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
]>