vue-step

基于Vue.js的移动端步骤导航组件 Mobile Step Navigation Component Based On Vue.js

Installation

npm i vue-step -S

API

| 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