Steps 步骤条

概述

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

1 .steps.vue
<template>
    <div class="steps">
        <h1>{{name}}</h1>
    </div>
</template>
<script src="./step.js"></script>
<style lang="less" src="./index.less"></style>

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 .但是官方有例子的
<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

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 .

代码

<template>
    <div class="steps">
        <Step 
            v-for="(x,index) in options"
            v-bind:options="x"
            v-bind:index="index"
             />
    </div>
</template>
<script>
import Step from './son/step.vue'
export default {
    components:{Step},
    props:{
        current:{
            type:Number,
            default:0,
        },
        options:{
            type:Array,
            default:[]
        }
    }
}
</script>

<style lang="less" src="./steps.less"></style>

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

<template>
    <div class="step">
        <div class="step_head">
            <div class="step_icon">
                <svg class="step_icon_icon" aria-hidden="true" :class="computedClass">
                    <use xlink:href="#icon-gongjuxiang-copy"></use>
                </svg>
            </div>
            <div class="step_title" :class="computedClass">
                    {{computedTitle}}
            </div>
            <div class="step_xian" v-if="index!=this.$parent.options.length-1" :class="computedXianClass"></div>

        </div>
        <div class="step_footer">
            {{options.content}}
        </div>
    </div>
</template>
<script>
// import haha from './haha.js'
// export default{
//     ...haha
// }

export default{
    props:{
        options:{
            type:Object,
            default:function(){
                return {
                    title:'步骤标题',
                    content:'需要一些解释，来描述这一个步骤是干啥滴',
                    icon:'步骤图标'
                }
            }
        },
        index:{
            type:Number,
            required:true,
        }
    },
    computed:{
        computedClass(){
            if(this.index+1==this.$parent.current){
                return 'step_finish'
            }else if(this.index+1<this.$parent.current){
                return 'step_finish'
            }else{
                return ''
            }
        },
        computedXianClass(){
            if(this.index+1==this.$parent.current){
                return 'step_xian_finish'
            }else if(this.index+1<this.$parent.current){
                return 'step_xian_finish'
            }else{
                return ''
            }
        },
        computedTitle(){
            if(this.index+1<this.$parent.current){
                return '已完成'
            }else{
                return this.options.title
            }
        }
    }
}
</script>
<style lang="less" src="./step.less"></style>

概述

代码

猜你喜欢