v3-use

Appearance

Return to top
On this page

useStepper

管理步骤器的 Hook

Demo

</>
source
currentStep: 1
isStart: false
isEnd: false
<template>
  <div>currentStep: {{ currentStep }}</div>
  <div>isStart: {{ isStart }}</div>
  <div>isEnd: {{ isEnd }}</div>
  <button @click="setCurrentStep(2)">setCurrentStep(2)</button>
  <button @click="toEnd">toEnd</button>
  <button @click="toStart">toStart</button>
  <button @click="toNext">toNext</button>
  <button @click="toPrev">toPrev</button>
  <button @click="reset">reset</button>
</template>

<script lang="ts" setup>
import { useStepper } from 'v3-use'
const {
  currentStep,
  setCurrentStep,
  isEnd,
  isStart,
  toEnd,
  toStart,
  toNext,
  toPrev,
  reset
} = useStepper({
  defaultValue: 1,
  min: 0,
  max: 3
})
</script>

Usage 

import { useStepper } from 'v3-use'
const { currentStep, toEnd, toStart, toNext, toPrev } = useStepper({
  defaultValue: 1,
  min: 0,
  max: 3
})

import { useStepper } from 'v3-use'
const { currentStep, toEnd, toStart, toNext, toPrev } = useStepper({
  defaultValue: 1,
  min: 0,
  max: 3
})

Reference

Type Declarations 

export interface Options {
  max: number
  min?: number
  defaultValue?: number
}
export interface UseStepperResult {
  currentStep: Ref<number>
  isStart: ComputedRef<boolean>
  isEnd: ComputedRef<boolean>
  setCurrentStep: (value: ValueParam) => void
  reset: () => void
  toPrev: () => void
  toNext: () => void
  toStart: () => void
  toEnd: () => void
}
export declare function useStepper(options: Options): UseStepperResult

export interface Options {
  max: number
  min?: number
  defaultValue?: number
}
export interface UseStepperResult {
  currentStep: Ref<number>
  isStart: ComputedRef<boolean>
  isEnd: ComputedRef<boolean>
  setCurrentStep: (value: ValueParam) => void
  reset: () => void
  toPrev: () => void
  toNext: () => void
  toStart: () => void
  toEnd: () => void
}
export declare function useStepper(options: Options): UseStepperResult