使用VueCLI制作TabBar

使用VueCLI制作TabBar

1 创建项目

在控制台输入：

vue create tabbar

选择配置后项目创建成功。

2 编写基础页面

把创建好后的文件夹里面一些自带的组件删除，接着在/src/asset文件夹下创建两个新文件夹：css和img，用来放置css代码和项目要用的图片。在css文件夹里创建base.css文件用来清除页面的默认样式。

body {
    padding: 0;
    margin: 0;
} 

并在App.vue文件中的<style></style>引用该文件，通过代码`@import “./asset/css/base.css”

在该文件中继续编写基本的结构代码，和简单的样式。

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

#tab-bar {
  display: flex;
  background-color: #f6f6f6;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 -1px 10px rgba(100,100,100,.2);
}在这里插入图片描述

3 组件的抽取

1 抽取App中的Tabbar

在./components文件夹下创建一个新组件来存放App.vue中的基本结构代码，组件名为TabBar.vue。在App.vue里引入并注册该组件(抽离时也应将样式也一并抽离，确保App.vue没有多余部分)。

2 继续从TabBar组件中抽离TabBarItem

使用插槽<slot></slot>将TabBar组件中的属性为tabbar-item替换掉，被替换的放到新组件TabBarItem中。

在组件TabBarItem中观察结构，发现可以使用两个具名插槽来替换冗余的标签，还可以重复使用。

继续在App.vue中引用、注册这两个组件。

import TabBar from "./tabbar/TabBar";
import TabBarItem from "./tabbar/TabBarItem";

此时App.vue组件

3 在TabBarItem组件中传入active图片

1 新增插槽并且再插槽上加入判断，根据条件来进行激活显示

2在使用插槽的时候填充到插槽中的内容会替换掉插槽内的所有内容，所以进行使用一个div将插槽包裹起来，在div中写一些必要的属性。像下面这样：

 <div :style="activeStyle"><slot name="item-text"></slot></div>

4 组件与路由结合

1 TabBarItem与路由结合

每个Tabbar-item都和一个路由跳转相对应

2 添加路由

在router文件夹下找到index.js文件，打开后在里面添加相关代码。完成后如下：

3 在main.js 中导入路由并使用

4 创建各个组件

为方便管理，单一的组件可以放到views文件夹下。

5 在TabBarItem组件上监听事件

在组件上设置监听事件，用来进行路由的跳转

在子组件在添加props属性用来接受父组件传过来的路径，设置监听函数用来进行路由的跳转

export default {
  name: "TabBarItem",
  props:{
    link: String,
    },
  
  methods: {
    itemClick(){
      this.$router.replace(this.link);
    }
  }

6 在APP中设置传递过来的跳转路径

5 TabBarItem中文字颜色

需要在props中定义一个属性。用于接收来自App中传递过来的颜色设置。设置props中的属性名称为activeColor 类型为 String 默认值为red 在TabbarItem组件中的文字上绑定上style 的计算属性。

路径判断当前选中的状态。返回一个Boolean值；

	// 在TabbarItem中添加如下代码
	 computed: {
      isActive() {
        /*该条件成立的时候表示某个tabbar-item属于活跃状态*/
        return this.$route.path.indexOf(this.path) !== -1
      }
    }

如果设置了颜色得话，被点击后就会显示设置的颜色，若没有，则会使用默认的颜色，通过计算属性来判断某个tabbar-item是否属于活跃状态，如果处于活跃条件得话，该tabbar-item就会被添加上颜色属性。

6 抽取APP组件中的代码到MainTabBar中

抽取后MainTabBar如下

来判断某个tabbar-item是否属于活跃状态，如果处于活跃条件得话，该tabbar-item就会被添加上颜色属性。