vue-step
基于Vue.js的移动端步骤导航组件 Mobile Step Navigation Component Based On Vue.js
Installation
npm i vue-step -SAPI
| Param | Description | Type | Default |
|---|---|---|---|
| now-step | The current step, The starting value is 1. | Number |
- |
| step-list | Name of all steps | Array |
- |
| active-color | Active status color | String |
'#1fb11d' |
| style-type | You can set 'style1' or 'style2' | String |
'style1' |
| direction | You can set 'horizontal' or 'vertical' | String |
'horizontal' |
| @selected | Event issued when an item is selected / clicked | Event |
- |
Usage
# example
<template>
<div id="app">
<vue-step :now-step="nowStep" :step-list="stepList"></vue-step>
</div>
</template>
<script>
import vueStep from 'vue-step'
export default {
name: 'app',
data () {
return {
nowStep: 2,
stepList: [
'First Step',
'Second Step',
'Third Step',
'Four Step'
]
}
},
components: {
vueStep
}
}
</script>Demo Screenshot
License
MIT