美文网首页
对vue的transition 路由的meta属性进行了封装

对vue的transition 路由的meta属性进行了封装

作者: 偏灬爱 | 来源:发表于2019-05-24 22:11 被阅读0次

保证了 左边是swipe-left 右边是swipe-right
代码如下

let max=0;
let getDeep=(route)=>{
  let count=1;
  let tem=[];
  if(route.children){
    tem=route.children.map(i=>{
      return getDeep(i);
    })
  }
  if(tem.length){
    return count+(Math.max(...tem));
  }
  return count;
}
let getMax=(r)=>{
  let tem=r.map(i=>{
    return getDeep(i);
  })
  return Math.max(...tem);
}
max=getMax(routes);
let getProvide=function(item,ind,send,count){
  if(!item.meta){
    item.meta={};
  }
  item.meta.index=send+Math.pow(10,count-1)*(ind+1);
  if(item.children){
    item.children.forEach((j,ind)=>{
        getProvide(j,ind,item.meta.index,count-1);
      });
  }
}
let provide=(routes)=>{
  routes.forEach((i,index)=>{
    if(!i.meta){
      i.meta={};
    }
    i.meta.index=index*Math.pow(10,max-1);
    if(i.children){
      i.children.forEach((j,ind)=>{
        getProvide(j,ind,i.meta.index,max-1);
      });
    }
  })
}
provide(routes)
在创建vue 实例前进行赋值

相关文章

网友评论

      本文标题:对vue的transition 路由的meta属性进行了封装

      本文链接:https://www.haomeiwen.com/subject/aukozqtx.html