vue的学习笔记（14）之Tabbar案例

1、TabBar实现思路

（1）如果在下方有一个单独的TabBar组件，如何封装？

• 自定义TabBar组件，在APP中使用
• 让TabBar出于底部，并且设置相关的样式

（2）TabBar中显示的内容由外界决定

• 定义插槽
• flex布局平分TabBar

（3） 自定义TabBarItem，可以传入 图片和文字

• 定义TabBarItem，并且定义两个插槽：图片、文字。
• 给两个插槽外层包装div，用于设置样式。
• 填充插槽，实现底部TabBar的效果

（4）传入 高亮图片

• 定义另外一个插槽，插入active-icon的数据
• 定义一个变量isActive，通过v-show来决定是否显示对应的icon

（5）TabBarItem绑定路由数据（若已用脚手架安装过路由，下面的手动安装路由步骤可省）

• 安装路由：npm install vue-router —save
• 完成router/index.js的内容，以及创建对应的组件
• main.js中注册router
• APP中加入组件

（6）点击item跳转到对应路由，并且动态决定isActive

• 监听item的点击，通过this.$router.replace()替换路由路径
• 通过this.$route.path.indexOf(this.link) !== -1来判断是否是active

（7）动态计算active样式
封装新的计算属性：this.isActive ? {‘color’: ‘red’} : {}

最终效果：

2、tabbar-实现流程

（1）基本的项目搭建
首先用vue init webpack tabbar创建一个项目

（2）然后在App.vue里面添加一下代码，就是加上要显示的内容和样式


得到一个模板样式：

（3）进一步优化

如果这么写的话，这段代码复用性很差，因为tabbar在很多页面会使用，因此将其抽离成一个组件。

最终的代码请看：

补充：

我们可以看到这一串代码的路径非常长，看起来很乱，有没有简便的写法呢？有，就是前面讲到的起别名

像这样子给路径起个别名，到时候只需按照你起的别名进行引用路径即可（如下图所示）。但是，在import中引用时可直接引用，但是在src里面时，因为是DOM的相关操作，所以要记得在路径前面添加~。注意：在vuecli3才可以直接在alias的其他别名的路径那使用@，vuecli2还是要自己写：

上图这是在用别名引用路径，可以通过和下面的路径进行对比，看起来舒服服多了。

结果还是能正常显示。