useStepper
提供用于构建多步骤向导界面的辅助程序。
¥Provides helpers for building a multi-step wizard interface.
示例
Form
{ "firstName": "Jon", "lastName": "", "billingAddress": "", "contractAccepted": false, "carbonOffsetting": false, "payment": "credit-card" }
Wizard
{ "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 }
用法
¥Usage
步骤作为数组
¥Steps as array
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',
])
// Access the step through `current`
console.log(current.value) // 'billing-address'
作为对象的步骤
¥Steps as object
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: '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'