vue 底部导航栏组件-蒲公英云

vue 底部导航栏组件

- 日理万妓 2021-07-24 23:23 634阅读 0赞

bug:
因为通过router-link跳转,所以只能点击文字跳转,将router-link换成其他标签,然后设置跳转事件能改变这一bug
因为非引入static内的图片,得用require引入

效果:
在这里插入图片描述
代码示例:

<template>
  <div class='foot'>
    <div class='nav'>
      <img :src="$route.path=='/home'?require('../../assets/tabs/1.png'):require('../../assets/tabs/2.png')" alt="">
      <router-link :to="{name:'home'}" :class="{colo:$route==='/home'}">外卖</router-link>
    </div>
    <div class='nav'>
      <img :src="$route.path=='/search'?require('../../assets/tabs/3.png'):require('../../assets/tabs/4.png')" alt="">
      <router-link :to="{name:'search'}">搜索</router-link>
    </div>
    <div class='nav'>
      <img :src="$route.path=='/order'?require('../../assets/tabs/5.png'):require('../../assets/tabs/6.png')" alt="">
      <router-link :to="{name:'order'}">订单</router-link>
    </div>
    <div class='nav'>
      <img :src="$route.path=='/person'?require('../../assets/tabs/7.png'):require('../../assets/tabs/8.png')" alt="">
      <router-link :to="{name:'person'}">我的</router-link>
    </div>
  </div>
</template>
<script>
  export default{ 
    data()
    { 
      return{ 
      }
    },
     methods:{ 
     }
  }
</script>
<style scoped>
 .foot>div>a{ 
    color: #bfbfbf;
    text-decoration: none;
  }
 .foot>div>a.active{ 
    color:#42af08;
  }
  .foot{ 
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
  }
  .foot>div{ 
    text-align: center;
    flex:1;
  }
  .foot>div>img{ 
    height: 30px;
    width: 30px;
    display: block;
    margin: 0 auto;
  }
</style>

无bug版本:

<template>
   <div class='tabbar'>
     <router-link to="/home">
         <img :src="$route.path=='/home'?'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg':'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4025634963,2730768284&fm=26&gp=0.jpg'" alt="">
         <p>首页</p>
     </router-link>
    <router-link to="/category">
         <img :src="$route.path=='/category'?'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg':'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4025634963,2730768284&fm=26&gp=0.jpg'" alt="">
         <p>分类</p>
     </router-link>
    <router-link to="shopcar">
         <img :src="$route.path=='/shopcar'?'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg':'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4025634963,2730768284&fm=26&gp=0.jpg'" alt="">
         <p>购物车</p>
     </router-link>
    <router-link to="mine">
         <img :src="$route.path=='/mine'?'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991,859863778&fm=26&gp=0.jpg':'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4025634963,2730768284&fm=26&gp=0.jpg'" alt="">
         <p>我的</p>
     </router-link>
   </div>
</template>
<script>
export default { 
  name:'tabbar',
  data(){ 
    return{ 
    }
  },
}
</script>
<style scoped>
.tabbar>.router-link-active{ 
    color:red
}
.tabbar>a{ 
   text-decoration: none;
   color:black;
   flex:1;
   text-align: center;
}
.tabbar>a>p{ 
    margin: 0;
}
.tabbar>a>img{ 
    width:50px;
    height: 50px;
}
.tabbar{ 
    display: flex;
    position: fixed;
    left: 0;
    bottom:0;
    width:100%;
}
</style>