Vue底部导航栏封装组件

           

 

废话不多说，直接晒代码

 

<template>
  <div class='navbar'>
    <ul>
      <li v-for="(item,index) in items" :key="index" @click="changeToggle(item.to)">
        <p><img :src="$route.path==item.to?item.activeImg:item.normalImg" alt="" width="24" height="24"></p>
        <p class="text" :class="{active:item.to == $route.path}">{{item.text}}</p>
      </li>
    </ul>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      path:'',
      items: [
        {
          text:"首页",
          to:"/home",
          normalImg:require('./../assets/complaint_01.png'),
          activeImg:require('./../assets/complaint_02.png')
        },
         {
          text:"登录",
          to:"/login",
          normalImg:require('./../assets/contact_01.png'),
          activeImg:require('./../assets/contact_02.png')
        },
         {
          text:"我的",
          to:"/mine",
          normalImg:require('./../assets/pay_01.png'),
          activeImg:require('./../assets/pay_02.png')
        }
      ]
    }
  },
  methods:{
    changeToggle(value){
      this.$router.push(value);
    }
  }
}
</script>
  
<style scoped lang="less">
  .navbar{
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-bottom: 10px;
    ul{
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li{
        p{
          &.active{
            color: #EA5520!important;
          }
          padding: 0;
          margin: 0;
          &.text{
            font-size: 14px;
            color: #999999;
          }
        }
      }
    }
  }
</style>