useStepper

类别

Utilities

导出体积

433 B

上次更改

4 months ago

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

示例

源码

表单

{
  "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) // '用户信息'

类型声明

显示类型声明

typescript

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]>