vue 位置导航

http://jsrun.pro/CgbKp

.location{width:50%;line-height:30px; background:#ccc; overflow-yhidden; white-space:nowrap;overflow: auto;cursor:pointer}
.location span em{margin:0 2px;}
.location span:last-child em{display: none}
li{line-height:30px}

<div id="app">
  <div class="location">
    <span @click='locationNavClick("all")'>全部文件 <em>&gt;</em></span>
    <span @click='locationNavClick(item,index)' v-for="(item,index) in locationNav">{{item.name}} <em>&gt;</em></span>
  </div>
  <ul>
    <li v-for='item in list' @click='inToFolder(item)'>{{item.name}}--{{item.size}}</li>
  </ul>
</div>

var index=new Vue({
    el: '#app',
    mounted:function(){
        this.getData();
    },
    data: {
        list:[],
      locationNav:[]
    },
    methods: {
      getData:function(id){//真实环境里要传入id，通过ajax获取数据
        var that=this;
        var t=new Date();
        var info='';
        for(let i=1;i<10;i++){
            info=t.getTime()+i*20000005+'';
            that.list.push({id:info,name:info,date:'2019-07-10 15:00',size:info.substring(11)+'M',type:'folder'});
        }
        /*that.$http.get('http://192.168.1.7:16000/mockjs/36/getMineList',{
                id:id
            }).then(res => (
                console.log(res.data)
            ))*/
      },
      locationNavClick:function(item,index){//位置导航
          if(item =='all'){
              this.list=[];
              this.locationNav=[];
              this.getData();
          }else{
              if(this.locationNav.length > 1){
                  if(index < this.locationNav.length -1){//最后一个点击无效
                      this.list=[];
                      this.locationNav.splice(index+1, this.locationNav.length - index - 1);
                      this.getData();
                  }
              }
              setTimeout(function(){//自动滚动横向导航条
                  document.querySelector('.location').scrollLeft=5000;
              }, 10);
          }
        },
      inToFolder:function(item){
            this.list=[];
            this.locationNav.push(item);
            this.getData();
            setTimeout(function(){//自动滚动横向导航条
                document.querySelector('.location').scrollLeft=5000;
            }, 10);
      }
    }
});