vue 底部导航栏组件

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

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

效果:  
![在这里插入图片描述][20200524170049707.png]  
代码示例:

<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>

![在这里插入图片描述][20200728210307392.png]

[20200524170049707.png]: /images/20210724/93b7ede3f9014a45860764889d584baa.png
[20200728210307392.png]: /images/20210724/36f552db385a4c60bfd7fff526d34be5.png