Skip to content

useStepper

Category
Export Size
433 B
Last Changed
last year

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

Demo

User information
姓氏:名字:
表单
{
  "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
}

用法

步骤作为数组

js
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'

步骤作为对象

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

Source

SourceDemoDocs

贡献者

丶远方
Anthony Fu
Jelle Roorda
Ostap Brehin
sun0day
Enzo Innocenzi

变更日志

No recent changes

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow.
Get Early Access