点击切换的步骤条

 

 

<template>
    <section class="main-content">
        <section class="content-body pall15">
          <section class="content-body mt20">
            <ul class="titleList">
              <li v-for="(item,index) of list" :key="index">
                <div class="tableList">
                     <div style="" class="corderClass" @click="toseve(item,index)">
                      <p>{{item.doing}}</p>
                      <div :class="{title:true,todo:item.doing=='todong',tosuss:item.doing=='success',addClass:item.toClsk}">{{index+1}}</div>
                      <p>{{item.title}}</p>
                    </div>
                    <i class="boederClass"></i>
                </div>
              </li>
            </ul>
          </section>
           <section class="content-body mt20">
              <keep-alive>
                <component :is="currentTabComponent"></component>
              </keep-alive>
           </section>
        </section>

    </section>
</template>

<script>
    export default {
        data() {
            return {
              active:2,
              list:[{title:'标题1',doing:'success',toClsk:false},
              {title:'标题2',doing:'success',toClsk:false},
              {title:'标题3',doing:'todong',toClsk:false},
              {title:'标题4',doing:'todong',toClsk:false},
              {title:'标题5',doing:'todong',toClsk:false}
              ],
              currentTabComponent:''
            }
        },
        beforeRouteUpdate (to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 可以访问组件实例 `this`
            let param = {
                path    : window.location.origin+from.fullPath,
                data    : this.$data
            }
            this.$store.dispatch('setCache',param);
            next()
        },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            let param = {
                path    : window.location.origin+from.fullPath,
                data    : this.$data
            }
            this.$store.dispatch('setCache',param);
                next()
        },
        mounted(){
            this.$store.dispatch('getCache').then(res=>{
                if(res.success){
                    Object.assign(this.$data , res.model);
                }else{
                    this.init();
                }
            })
        },
        methods: {
            init(){

            },
            toseve(item,index){
              console.log(item,index)
              this.list.map(items=>{
                if(items.title==item.title){
                   this.$set(items,'toClsk',true)
                }else{
                   this.$set(items,'toClsk',false)
                }

              })
            }
        }
    }
</script>

<style scoped lang="scss">
  .titleList{
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    li{
      box-flex: 1;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      width:100%;


      .tableList{
         height:100px;
        // display: table;
        width:100%;
        position: relative;
        .corderClass{
          width:50px;
          text-align:center;
          // display: table-cell;
           position: absolute;
          top: 50%;left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          z-index:10;
        }
        .boederClass{
          display: inline-block;
          width:100%;
          position:absolute;
          border-top:2px solid #eee;
          top:49px;
          left:0;
          z-index: 2;
        }
      }


    }
  }
   .title{
        width:50px;
        height:50px;
        text-align: center;
        line-height: 50px;
        border-radius: 50%;
        color:#fff;
        // display: inline-block;

      }
   .todo{
      background: #eee;
      border:1px solid #ddd;
    }
    .tosuss{
      background: #29c1c2 ;
      border:1px solid #29c1c2 ;
    }
    .addClass{
      background: #409EFF ;
      border:1px solid #409EFF ;
    }
</style>