基于vue组件思想的移动端导航栏 —— TabBar

用vue CLI 3.0搭建的项目结构，组件目录结构如图，做个笔记📒。

封装TabBar组件：

组件目录结构：

MainTabBar.vue —> TabBar.vue —> TabBarItem.vue

思路就是，TabBar 里的内容由插槽决定，然后用 flex 布局平分TabBar。

然后自定义四个 item ，可以传入图片和文字，item 里的图片和文字用插槽来实现，插槽外再用 div 包装，用来设置样式。

插槽就相当于占位符。

---

1、TabBarItem.vue 页面中：

这个组件主要为TabBar内部的子组件，项目中需要放几个就可以放几个，并且点击的时候将会跳转到对应的路由当中。

<template>   
  <div class="tab-bar-item">
     <!-- icon -->
     <div> <slot name="item-icon"> </slot> </div>
     <!-- 活跃的icon -->
     <div> <slot name="item-icon-active"> </slot> </div>
     <!-- 文字 -->
    <div> <slot name="item-text"> </slot> </div>   
 </div> 
</template> 

使用组件 TabBarItem 往里面填充内容时，就利用插槽来实现：slot = " " :

---

2、MainTabBar.vue页面中使用：

 <tab-bar>
    <tab-bar-item>
       <img slot="item-icon" src="@/assets/images/tabbar/home.svg" alt="" />
       <img
           slot="item-icon-active"
           src="@/assets/images/tabbar/home_active.svg"
           alt=""/>
       <div slot="item-text">首页</div>
    </tab-bar-item>
</tab-bar>

占位符插槽使用很简单，直接填充名字slot=“ ”，然后往里面填充内容。

3、TabBar.vue 页面完整内容，只需要添加一个插槽，用来填充TabBarItem：

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

4、TabBarItem.vue 页面中完整内容：

<template>
  <div class="tab-bar-item" @click="itemClick">
      <!-- icon -->
      <div v-if="!isActive"><slot name="item-icon"> </slot></div>
      <!-- 活跃的icon -->
      <div v-else><slot name="item-icon-active"> </slot></div>
      <!-- 文字 -->
      <div :style="activeStyle"><slot name="item-text"> </slot></div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props: {
      path: String,
      activeColor: {
          type: String,
          default: "#fc5979",
      },
  },
  computed: {
      isActive() {
          return this.$route.path.indexOf(this.path) !== -1;
      },
      activeStyle() {
          return this.isActive ? { color: this.activeColor } : {};
      },
  },
  methods: {
      itemClick() {
          this.$router.replace(this.path);
      },
  },
};
</script>

<style lang="scss" scoped>
.tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
    img {
        width: 24px;
        height: 24px;
        margin-top: 3px;
        vertical-align: middle;
        margin-bottom: 2px;
    }
}
</style>

5、MainTabBar.vue 页面中完整内容：

只展示了一个item

<template>
   <tab-bar>
      <tab-bar-item path="/home" activeColor="#fc5979">
         <img slot="item-icon" src="@/assets/images/tabbar/home.svg" alt="" />
         <img
             slot="item-icon-active"
             src="@/assets/images/tabbar/home_active.svg"
             alt=""/>
         <div slot="item-text">首页</div>
      </tab-bar-item>
   </tab-bar>
</template>

<script>
import TabBar from "@/components/common/tabbar/TabBar";
import TabBarItem from "@/components/common/tabbar/TabBarItem";

export default {
    name: "MainTabBar",
    components: {
        TabBar,
        TabBarItem,
    },
};
</script>

涉及到的组件传值：

MainTabBar是父组件，TabBarItem为子组件，父组件需要传两个值：1.点击tab切换的路由 path 2.点击tab切换活跃状态 activeColor。

TabBarItem组件中，点击切换活跃的样式，父组件点击，然后props传递给item子组件。在computed计算属性中。返回不同的布尔值。来做底部图片的显示隐藏。