vue3-stepper

A Stepper Component for Vue3

How to use

install

npm i ue3-stepper --save

import to your project

<template>
    <Stepper 
    v-model="num"
    :steps="steps"
    :max="3"
    />
</template>
<script setup>
    import Stepper from 'vue3-stepper/Stepper.vue'
    const num = ref(0)
    const steps = reactive([{text:'1',label:'One'},{text:'2',label:'Two'}])
</script>

props

| keyName | type | required | default value | description | |-----------------|---------------------|----------|---------------|------------------------------| | steps | <{text,label}>Array | true | | the data to gen every step | | activeColor | string | false | #AD0CD3 | color for current step item | | inActiveColor | string | false | #F6F6F6 | color for other step item | | progressPadding | string | false | 70px | the distance one the side | | max | number | false | | maxium step count | | vaildator | function | false | | return true will allow next |

How develop

Project setup

yarn install

Compiles and hot-reloads for development

yarn dev

Compiles and minifies for production

yarn build

Customize configuration

See Configuration Reference.