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，预先写好的组件。还是用这种方式重写组件吧