Steps|Steps 步骤条 Steps步骤条

概述 【Steps|Steps 步骤条】1 .拆分某项流程的步骤，引导用户按照流程完成任务
2 .这里项目结构又可以分开一步了

1 .steps.vue 2 .step.js export default{ data:function(){ return { name:'steps' } } }3 .index.less @name:.steps; @{name}{ border:@border; } 4 .这样代码更加分开。把js部分也分开，主要是每次找的时候上下翻的好麻烦，这样可以对照html结构来操作 5 .本来以为这样会导致一些bug，但是搞了一晚上之后又使用最一开始的方法又好了，真是日了。。。。这也太不稳定了吧 6 .还是不要把js分出来了吧，现在发现会有很多问题，而且分的好像太细了文件夹太多了，操作起来更麻烦了，之后还是按照情况分类吧，少的就不分出去了。。 7 .还有新版本的vue-cli 每次编译就出错，真是爆炸了 8 .这个果然会报这个错误 9 .import Step from '@/components/base/steps/son/step' 之前的引入，都是后面不加.vue的 10 .现在把js分出去之后，好像会编译不到。可能是没有及时从src把代码拉回来，也可能是有一个js文件导入import的路径有问题。 11 .这就奇怪了，把每种情况都试了下，关键是不能稳定重现。每次出现的条件都不是必须的。还是看下.vue文件的官方推荐组件写法吧，不要自己开创了 12 .但是官方有例子的

3 .别人的抽离方式:并不是直接使用src

export default { data () { return { } }, mounted () { console.log(this.$store.state.username)// test } }import navbarJs from'../assets/js/navbar.js' export default { ...navbarJs }

4 .其实无论怎么看这个组件的功能还是传入的参数，都没有必要写成slot的写法，这样用的时候还要额外引入一个组件
5 .但是还是发现了一个新问题，也不算很亏吧
6 .
代码

1 .其他的状态可能需要在传一个值。比如这一步失败变成红色样式那种，现在好像只能显示进行到了那一步
2 .要做一个全部完成的一个总完成状态，就像promise all用法一样

观看源码实现发现，根本就不是传的数组进去，传的还是slot，预先写好的组件。还是用这种方式重写组件吧