Vue-CLI + Vue3 + Vue-Router4 实现tabbar小案例

tabbar导航栏案例：该案例实现了基础的组件封装，编程式路由，以及插槽的使用，对于我们日常组件化开发有着很大的启示作用，主要效果是点击下方的导航栏链接，上方内容区显示对应的组件内容，就如果我们常用的手机App一样。

效果图：

项目结构图：

svg图片资源下载：点击下载图片资源

1、使用Vue-CLI新建tabbar工程，删除不必要的vue组件，并且取消代码检查：lintOnSave:false
2、在assets文件夹下建立css和img文件夹，存放静态资源，将图片复制到img文件夹中的tabbar子文件夹中

3、在css文件夹中建立base.css文件：

body{
    padding: 0;
    margin: 0;
}
/*然后在App.vue组件的style中引入css/base文件：@import "assets/css/base.css"，此处不建议在main.js中引入*/

4、修改App.vue的内容：

<template>
  <div id="app">
    <div id="tab-bar">
      <div class="tab-bar-item">首页</div>
      <div class="tab-bar-item">分类</div>
      <div class="tab-bar-item">购物车</div>
      <div class="tab-bar-item">我的</div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'App',
  }
</script>

<style>
@import "assets/css/base.css";
#tab-bar{
  display: flex; /* 弹性盒子布局 */
  background-color: #f1f1f1;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  box-shadow: 0 -2px 2px rgba(100,100,100,0.2);
}
.tab-bar-item{
  flex: 1; /* 对多项内容等分排列 */
  text-align: center;
  height: 49px;
  font-size: 14px;
}
</style>

5、将导航栏封装成TabBar和TarBarItem两个组件，步骤如下：

//1. 把id为tab-bar的层及相应的css代码等封装在一起，作为一个组件
//2. 在components文件夹中建立一个名为tabbar的子文件夹，单独存放tabbar组件相关的组件，不要把所有的组件都直接放在components文件夹下，便于管理。[项目越大，组件越多]
//3. 在tabbar文件夹中建立名为TabBar.vue文件，把App.vue文件中的内容复制到TabBar.vue中
//4. 在TabBar.vue中，有四项内容，由于每一项在后期显示时有图片和文字，所以把TabBar.vue中的每一项封装成一个组件：TabBarItem.vue，考虑到TabBar.vue中使用的TabBarItem子组件数量是不固定的，所以要用到插槽。
//代码如下：

TabBar.vue内容：

<template>
  <div id="tab-bar">
    <!-- 使用插槽，让App.vue根据需要，插入内容 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "TabBar"
}
</script>

<style scoped>
#tab-bar{
  display: flex; /* 弹性盒子布局 */
  background-color: #f1f1f1;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  box-shadow: 0 -2px 2px rgba(100,100,100,0.2);
}
</style>

TabBarItem.vue内容：

<template>
  <div class="tab-bar-item">
    <img src="../../assets/img/tabbar/home.svg" alt="" />
    <div>首页</div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem"
}
</script>

<style scoped>
.tab-bar-item {
  flex: 1; /* 对多项内容等分排列 */
  text-align: center;
  height: 49px;
  font-size: 14px;
}

.tab-bar-item img{
  width: 24px;
  height: 24px;
  margin-top: 3px;
  margin-bottom: 2px;
  vertical-align: middle;
}
</style>

App.vue内容：

<template>
  <div id="app">
    <tab-bar>
      <!-- 根据需要在插槽位置插入4个子组件TabBarItem[数量可变] -->
      <tab-bar-item></tab-bar-item>
      <tab-bar-item></tab-bar-item>
      <tab-bar-item></tab-bar-item>
      <tab-bar-item></tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
  //导入TabBar组件
  import TabBar from "./components/tabbar/TabBar";
  //导入TabBarItem组件
  import TabBarItem from "./components/tabbar/TabBarItem";
  export default {
    name:'App',
    components:{
      TabBarItem,
      TabBar
    }
  }
</script>

<style>
@import "assets/css/base.css";
</style>

6、测试运行…界面会出现四个子组件，但内容都一样，而我们要实现的是显示不同内容的4个组件，所以就可以在TabBarItem中也使用插槽(上方显示图片，下方显示文字)：

<template>
  <div class="tab-bar-item">
    <!--  如果使用多个插槽，要使用具名插槽  -->
    <slot name="item-icon"></slot>
    <slot name="item-text"></slot>
  </div>
</template>

7、修改App.vue，将TabBarItem中的插槽填满，把其中对于img的样式放到App.vue中：

<template>
  <div id="app">
    <tab-bar>
      <!-- 根据需要在插槽位置插入4个子组件TabBarItem[数量可变] -->
      <tab-bar-item>
        <template #item-icon>
          <img src="./assets/img/tabbar/home.svg" alt="">
        </template>
        <template #item-text>
          <div>首页</div>
        </template>
      </tab-bar-item>
      <tab-bar-item>
        <template #item-icon>
          <img src="./assets/img/tabbar/category.svg" alt="">
        </template>
        <template #item-text>
          <div>分类</div>
        </template>
      </tab-bar-item>
      <tab-bar-item>
        <template #item-icon>
          <img src="./assets/img/tabbar/shopcart.svg" alt="">
        </template>
        <template #item-text>
          <div>购物车</div>
        </template>
      </tab-bar-item>
      <tab-bar-item>
        <template #item-icon>
          <img src="./assets/img/tabbar/profile.svg" alt="">
        </template>
        <template #item-text>
          <div>我的</div>
        </template>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>
<style>
@import "assets/css/base.css";
.tab-bar-item img {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  margin-bottom: 2px;
  vertical-align: middle;
}
</style>

接下来实现点击TabBarItem时，显示红色图片且红色文字。先给TabBarItem组件增加一个插槽，专门显示活跃图片，原来那个显示图片的插槽显示非活跃的；当组件被点击时，判断它是否为活跃状态，是就显示红色图片，否则显示黑色图片，文字也是如此…

8、在TabBar组件的template中增加一个插槽，用来显示活跃图片：

<template>
  <div class="tab-bar-item">
    <!--  如果使用多个插槽，要使用具名插槽  -->
    <slot name="item-icon"></slot>
    <slot name="item-icon-active"></slot>
    <slot name="item-text"></slot>
  </div>
</template>

9、对App.vue进行修改，给每个tab-bar-item中插入一张活跃图片，然后运行测试，发现有两个svg图片，也就是说三个插槽都显示出来了：

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

10、对TabBarItem组件进行修改，实现两个图片插槽只显示一个，使用v-if与v-else实现：

<template>
  <div class="tab-bar-item">
    <!--  如果使用多个插槽，要使用具名插槽  -->
    <div v-if="!isActive">
      <slot name="item-icon"></slot>
    </div>
    <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",
  data(){
    return{
      isActive:false
    }
  },
  computed:{
    activeStyle(){
      return this.isActive ? {color:'#ff5777'}:{}
    }
  }
}
</script>

<style scoped>
.tab-bar-item {
  flex: 1; /* 对多项内容等分排列 */
  text-align: center;
  height: 49px;
  font-size: 14px;
}
</style>

接下来实现路由：点击tabbar导航栏中某一项，就显示相应的组件。

在view文件夹中存放页面级别的组件，比如说路由跳转的组件，在component文件夹中存放可复用的组件。

11、在views文件夹中创建四个子文件夹(home/category/shopcart/profile)，在子文件夹中分别建立相对应的vue文件(HomeView/CategoryView/ShopCartView/ProfileView)，文件中显示一些简单文字用以区分即可：

<template>
  <div>
    <h2>这是首页组件</h2>
  </div>
</template>

12、在index.js配置文件中添加路由配置信息：

{
  path: '/',
  redirect: '/home'
},
{
  path: '/home',
  name: 'home',
  component: () => import('../views/tabbar/home/HomeView')
},
{
  path: '/category',
  name: 'category',
  component: () => import('../views/tabbar/category/CategoryView')
},
{
  path: '/shopcart',
  name: 'shopcart',
  component: () => import('../views/tabbar/shopcart/ShopCartView')
},
{
  path: '/profile',
  name: 'profile',
  component: () => import('../views/tabbar/profile/ProfileView')
},

13、在TabBarItem中添加点击事件与路由结合起来，用来显示正确的组件：

<script>
export default {
  name: "TabBarItem",
  props:{
    path:String,
    activeColor:String
  },
  data(){
    return{
      isActive:false
    }
  },
  computed:{
    activeStyle(){
      return this.isActive ? {color:this.activeColor}:{}
    }
  },
  methods:{
    itemClick(){
      this.$router.replace(this.path)
    }
  }
}
</script>

14、对App.vue进行修改，在tab-bar-item上增加path参数(分别为：/home，/category，/shopcart，/profile)，和activeColor参数(值为活跃时的颜色)，然后在根模板下添加router-view输出组件，运行测试，此时就可以切换组件视图了：

<tab-bar-item path="/home" active-color="#ff5577">

15、在TabBarItem中修正显示的颜色，当前点击项显示红色，其它项为默认颜色(黑色)，在computed中增加isActive属性(实现活跃验证)，将data()中的isActive删掉，然后运行测试：

isActive(){
  // === -1：表示当前路由中的路径不包含父组件传递过来的路径
  return this.$route.path.indexOf(this.path) !== -1
}

16、继续提取出一个组件(MainTabBar.vue)，放在components文件夹下的tabbar文件夹中，把App.vue文件内容复制到MainTabBar中，以便提取修改：

MainTabBar：

<template>
  <div id="app">
    <tab-bar>
      <!-- 根据需要在插槽位置插入4个子组件TabBarItem[数量可变] -->
      <tab-bar-item path="/home" active-color="#ff5577">
        <template #item-icon>
          <img src="../../assets/img/tabbar/home.svg" alt="">
        </template>
        <template #item-icon-active>
          <img src="../../assets/img/tabbar/home_active.svg" alt="">
        </template>
        <template #item-text>
          <div>首页</div>
        </template>
      </tab-bar-item>
      <tab-bar-item path="/category" active-color="#ff5577">
        <template #item-icon>
          <img src="../../assets/img/tabbar/category.svg" alt="">
        </template>
        <template #item-icon-active>
          <img src="../../assets/img/tabbar/category_active.svg" alt="">
        </template>
        <template #item-text>
          <div>分类</div>
        </template>
      </tab-bar-item>
      <tab-bar-item path="/shopcart" active-color="#ff5577">
        <template #item-icon>
          <img src="../../assets/img/tabbar/shopcart.svg" alt="">
        </template>
        <template #item-icon-active>
          <img src="../../assets/img/tabbar/shopcart_active.svg" alt="">
        </template>
        <template #item-text>
          <div>购物车</div>
        </template>
      </tab-bar-item>
      <tab-bar-item path="/profile" active-color="#ff5577">
        <template #item-icon>
          <img src="../../assets/img/tabbar/profile.svg" alt="">
        </template>
        <template #item-icon-active>
          <img src="../../assets/img/tabbar/profile_active.svg" alt="">
        </template>
        <template #item-text>
          <div>我的</div>
        </template>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
//导入TabBar组件
import TabBar from "./TabBar";
//导入TabBarItem组件
import TabBarItem from "./TabBarItem";
export default {
  name:'MainTabBar',
  components:{
    TabBarItem,
    TabBar
  }
}
</script>

<style>
.tab-bar-item img {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  margin-bottom: 2px;
  vertical-align: middle;
}
</style>

App.vue：

<template>
  <div id="app">
    <router-view/>
    <main-tab-bar></main-tab-bar>
  </div>
</template>

<script>
//导入MainTabBar组件
import MainTabBar from "@/components/tabbar/MainTabBar";
export default {
  name:'App',
  components:{
    MainTabBar
  }
}
</script>

<style>
@import "assets/css/base.css";
</style>