Steps 步骤条

用于引导用户按照流程完成任务的导航条，显示当前所在步骤

引入

import { Steps } from 'mand-mobile'
Vue.component(Steps.name, Steps)

代码演示

三个步骤

<template>
  <div class="md-example-child md-example-child-steps md-example-child-steps-0">
    <md-steps
      :steps="steps">
    </md-steps>
  </div>
</template>
<script>
import {Steps} from 'mand-mobile'
export default {
  name: 'steps-demo',
  components: {
    [Steps.name]: Steps,
  },
  data() {
    return {
      steps: [
        {
          name: '开通理财账户',
        },
        {
          name: '验证手机号',
        },
        {
          name: '开通成功',
        },
      ],
    }
  },
}
</script>
                

自定义步骤图标

<template>
  <div class="md-example-child md-example-child-steps md-example-child-steps-2">
    <md-steps
      :steps="steps"
      :current="2">
      <div slot="reached" slot-scope="props">
        <!-- props.index -->
        <md-icon name="circle-alert" size="lg"></md-icon>
      </div>
      <div slot="current" slot-scope="props">
        <!-- props.index -->
        <md-icon name="hollow-plus" size="lg"></md-icon>
      </div>
    </md-steps>
  </div>
</template>
<script>
import {Steps, Icon} from 'mand-mobile'
export default {
  name: 'steps-demo',
  components: {
    [Steps.name]: Steps,
    [Icon.name]: Icon,
  },
  data() {
    return {
      steps: [
        {
          name: '开通理财账户',
        },
        {
          name: '验证手机号',
        },
        {
          name: '开通成功',
        },
      ],
    }
  },
}
</script>
                

动态修改当前所处步骤 current = 2

<template>
  <div class="md-example-child md-example-child-steps md-example-child-steps-4">
    <md-steps
      :steps="steps"
      :current="currentStep">
    </md-steps>
  </div>
</template>
<script>
import {Steps} from 'mand-mobile'
export default {
  name: 'steps-demo',
  components: {
    [Steps.name]: Steps,
  },
  mounted() {
    window.triggerSteps0 = () => {
      this.currentStep = 2
    }
  },
  data() {
    return {
      steps: [
        {
          name: '登录',
        },
        {
          name: '开通',
        },
        {
          name: '验证',
        },
        {
          name: '成功',
        },
      ],
      currentStep: 0,
    }
  },
}
</script>
                

完成全部步骤

<template>
  <div class="md-example-child md-example-child-steps md-example-child-steps-5">
    <md-steps
      :steps="steps"
      :current="currentStep">
    </md-steps>
  </div>
</template>
<script>
import {Steps} from 'mand-mobile'
export default {
  name: 'steps-demo',
  components: {
    [Steps.name]: Steps,
  },
  data() {
    return {
      steps: [
        {
          name: '登录',
        },
        {
          name: '开通',
        },
        {
          name: '验证',
        },
        {
          name: '成功',
        },
      ],
      currentStep: 4,
    }
  },
}
</script>
<style lang="stylus">
.md-example-child-steps-5
  height 140px
  .md-steps .icon.current::before
    content ''
    color color-primary-tap
    border-bottom 10px solid
    border-left 10px solid transparent
    border-right 10px solid transparent
    position absolute
    top 130px
</style>
 
                

四个步骤

<template>
  <div class="md-example-child md-example-child-steps md-example-child-steps-1">
    <md-steps
      :steps="steps">
    </md-steps>
  </div>
</template>
<script>
import {Steps} from 'mand-mobile'
export default {
  name: 'steps-demo',
  components: {
    [Steps.name]: Steps,
  },
  data() {
    return {
      steps: [
        {
          name: '登录',
        },
        {
          name: '开通',
        },
        {
          name: '验证',
        },
        {
          name: '成功',
        },
      ],
    }
  },
}
</script>
                

指定当前步骤

<template>
  <div class="md-example-child md-example-child-steps md-example-child-steps-3">
    <md-steps
      :steps="steps"
      :current="2">
    </md-steps>
  </div>
</template>
<script>
import {Steps} from 'mand-mobile'
export default {
  name: 'steps-demo',
  components: {
    [Steps.name]: Steps,
  },
  data() {
    return {
      steps: [
        {
          name: '登录',
        },
        {
          name: '开通',
        },
        {
          name: '验证',
        },
        {
          name: '成功',
        },
      ],
    }
  },
}
</script>
                

利用current类增加自定义样式

<template>
  <div class="md-example-child md-example-child-steps md-example-child-steps-5">
    <md-steps
      :steps="steps"
      :current="currentStep">
    </md-steps>
  </div>
</template>
<script>
import {Steps} from 'mand-mobile'
export default {
  name: 'steps-demo',
  components: {
    [Steps.name]: Steps,
  },
  data() {
    return {
      steps: [
        {
          name: '登录',
        },
        {
          name: '开通',
        },
        {
          name: '验证',
        },
        {
          name: '成功',
        },
      ],
      currentStep: 1,
    }
  },
}
</script>
<style lang="stylus">
.md-example-child-steps-5
  height 140px
  .md-steps .icon.current::before
    content ''
    color color-primary-tap
    border-bottom 10px solid
    border-left 10px solid transparent
    border-right 10px solid transparent
    position absolute
    top 130px
</style>
 
                

API

Tabs Props