vue-cli3.0+antd+steps

前言：

        这里对antd的步骤条进行二次封装

实现效果：

实现步骤：

第一：antd_steps.vue

<template>
    <a-steps progressDot  :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title"/>
    </a-steps>
</template>

<script>

export default {
  props: {

  },
  data () {
    return {
      name:'步骤条',
      current: 0,
      steps: [
        {
          title: '第一步',
        },
        {
          title: '第二步',
        },
        {
          title: '第三步',
        }
      ],
    };
  },

  components: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {
    /**
     * 点击下一步
     */
    next() {
      if(this.current<this.steps.length-1){
        this.current++;
        return this.current;
      }else{
        return this.steps.length;
      }
    },
    /**
     * 点击上一步
     */
    prev() {
      this.current--;
    },
  },

  watch: {}
}

</script>
<style lang='less' scoped>

</style>

第二：js引入：

import aSteps from '@/components/comantd/antd_steps'

components: {
    aSteps,
  },

第三：template调用：

<aSteps ref="add_steps"></aSteps>