vue封装底部导航栏

vue封装底部导航栏

TabBarItem子组件

<template>
  <div class="tab-bar-item" @click="TabBarBtn">
    <div v-if="!RouteIsActive"><slot name="item-icon"></slot></div>
    <div v-else><slot name="item-icon-active"></slot></div>
    <div :style="ItemActiveStyle"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
export default {
  name: 'TabBarItem',
  data() {
    return{
    }
  },
  props: {
    link:String,
  },
  computed: {
    RouteIsActive() {//判断当前哪个路由处于活跃状态
      return this.$route.path.indexOf(this.link) !== -1
    },
    ItemActiveStyle() {
      return this.RouteIsActive ? {color: "red"} : {}
    }
  },
  methods: {
    TabBarBtn() {
      this.$router.push(this.link)
    }
  }
}
</script>
<style>
  .tab-bar-item{
    flex: 1;
    text-align: center ;
  }
  .tab-bar-item img{
     width: 27px;
     height: 27px;
     margin-top: 2px;
     vertical-align: middle;
   }
  .tab-bar-item span{
    display: block;
    font-size: 14px;
  }
</style>

TabBar组件

<template>
  <div id="tab-bar">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  
}
</script>
<style>
  #tab-bar {
    display: flex;
    height: 49px;
    background-color: rgb(226, 220, 220);
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    box-shadow: 0 -2px 2px 0 rgba(226, 220, 220,0.9);
  }
</style>

MainTabBar父组件封装

<template>
  <TabBar>
    <TabBarItem link="/home">
      <img slot="item-icon" src="~@/assets/img/tabbar/home.png" alt="">
      <img slot="item-icon-active" src="~@/assets/img/tabbar/home-red.png" alt="">
      <span slot="item-text">首页</span>
    </TabBarItem>
    <TabBarItem link="/shop">
      <img slot="item-icon" src="~@/assets/img/tabbar/shop.png" alt="">
      <img slot="item-icon-active" src="../../../assets/img/tabbar/shop-red.png" alt="">
      <span slot="item-text">购物车</span>
    </TabBarItem>
    <TabBarItem link="/category">
      <img slot="item-icon" src="~@/assets/img/tabbar/category.png" alt="">
      <img slot="item-icon-active" src="~@/assets/img/tabbar/category-red.png" alt="">
      <span slot="item-text">分类</span>
    </TabBarItem>
    <TabBarItem link="/profile">
      <img slot="item-icon" src="~@/assets/img/tabbar/profile.png" alt="">
      <img slot="item-icon-active" src="~@/assets/img/tabbar/profile-red.png" alt="">
      <span slot="item-text">我的</span>
    </TabBarItem>
  </TabBar>
</template>

<script>

import TabBar from '../../common/TabBar/TabBar'
import TabBarItem from '../../common/TabBarItem/TabBarItem'
export default {
  name: 'MainTabBar',
  components:{
    TabBar,
    TabBarItem
  },
}
</script>
<style>
  
</style>

效果图

最后

以上就是激动老虎为你收集整理的vue封装底部导航栏的全部内容，希望文章能够帮你解决vue封装底部导航栏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。