说明： 一、 <BaseStep :currentStep="1" :stepsLabel="stepsLabel" :stepsDesc="stepsDesc" @change="onChange" />
组件的接口：也就是父组件使用步骤条的元素需要传递给子组件的参数，子元素通过props接收 1.currentStep 为当前所在的步骤，默认值1
2.stepsLabel 为步骤名称数组，可以从中获取步骤条数即数组长度，以及步骤条的名称
3.stepsDesc 步骤条说明数组，为步骤条每一步骤的说明，对应步骤名称数组
4.@change="onChange" 为组件绑定自定义事件，方便子组件传递数据（当前所在的步骤）给父组件 onChange (index) { console.log('parentIndex:', index) } 主要传递当前所在的步骤方便父组件使用
5组件中间可以插入一些每个步骤想要显示的内容：如注册账号每一步需要的资料等。 这里是通过插槽的方式来插入内容，前提是每个显示的内容标签需要标上对应的步骤数 slot="？"
二、 1整个步骤组件的
2.1 根据totalsteops 传入的步骤数组长度 ，循环生成数组长度数量的步骤条 v-for="n in totalSteps" 2.2 给每个生成的步骤绑定class样式：current指目前所在的步骤 n为生成的第几个步骤 ① 步骤条基本的样式 ② 判断目前进行的步骤current是否超过该步骤条步骤n，如果是，则设置finish完成样式 ③ 判断目前进行的步骤是否就是该步骤条步骤，同时不是最后一个步骤，如果是则设置process正在处理样式 ④ 判断目前是否进行到最后一步并且是最后一个步骤，如果是显示last-process样式 ⑤ 判断目前的步骤是否还未到该条步骤，如果是显示 等待middle-wait样式 ⑥ 判断目前是否还未到最后步骤，并且自身为最后步骤条 如果是显示 last-wait样式 2.3 绑定了一个点击事件，当点击所在的步骤条时候，触发methods里面的change（）函数,并把n传送进来 methods: { onChange (index) { // 点击切换选择步骤 console.log('index:', index) if (this.current !== index) { //判断点击的步骤条是否为当前正在进行的步骤，如果是则退出函数 this.current = index //将当前进行的步骤设置为该条步骤 this.$emit('change', index) //传递给父组件当前步骤数信息 } } }
3.在每个生成的步骤条中，内部包含步骤条图标和步骤注释 3.1 加了判断v-if="current<=n"，未完成的步骤条图标显示步骤数，完成的显示√ 3.2
5script 接收父组件传来的参数，这些参数也都设置了默认的一些数据类型和默认值
methods加了一个click方法，方便在点击步骤条图标时候切换步骤，并且触发组件的自定义事件，从而给父组件发送消息告知如今处在的步骤
6 一些样式
