文章目录

# 效果

不单只一个项目可用，其他项目均可用

# 思路

如果在下方有一个单独的 TabBar 组件，你如何封装

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

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

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

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

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

传入 高亮图片

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

TabBarItem 绑定路由数据

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

<stron>item 跳转到对应路由，并且动态决定 isActive</stron>

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

动态计算 active 样式

  • 封装新的计算属性： this.isActive ? {‘color’: ‘red’} : {}

# 代码