Vue Tabbar 的封装

1. 通过脚手架创建项目

• 创建项目

  vue init webpack tabbar 

• 选择配置

  ? Project name vuecli2test # 会根据这个名称创建一个文件夹，存放之后项目的内容该名称也会作为默认的项目名称，但是不能包含大写字母等 ? Project description description # 项目名称 , 不能有大写字母 ? Author renyi <2822930767@qq.com>	# 作者信息 ? Vue build standalone	# 后面介绍 ? Install vue-router? Yes	# 路由 ? Use ESLint to lint your code? Yes	# ESLint 代码规范检测, 根据自己需求 ? Pick an ESLint preset Standard	 ? Set up unit tests No	# 单元测试 ? Setup e2e tests with Nightwatch? No	# e2e测试，end to end安装Nightwatch，是一个利用selenium或 webdrivers或phantomis等进行自动化测试的框架 ? Should we run `npm install` for you after the project has been created? (recommended) npm # 选择npm 或 yarn 

2. 项目搭建

• 以下是项目框架 , 我们先将底部的导航抽取成一个 TaBra 组件 , 再将 其中的 4 个部分再抽取成一个 组件 Tabra-Item

  

• 1. 创建 TaBra.vue

  • 创建TaBra.vue 后 , 在其模板中准备一个插槽 , 用于抽取 Tabra-Item

  <template>   <div id="tab-bar">     <!--这里的插槽是给Tabra-Iteam准备的-->     <slot></slot>   </div> </template>  <script>   export default {     name: "TabBar"   } </script>  <style scoped>   #tab-bar{     display: flex;     background-color: #f6f6f6;      position: fixed;     left: 0px;     right: 0px;     bottom: 0px;      box-shadow: 0px -1px 1px rgba(144, 147, 145, 0.2);   } </style> 

• 2. 抽取Tabra-Item

  在组件中提供3个插槽 , 一个是未获取焦点的图片 , 一个是获取焦点后的图片 , 还有一个是文本

  <template>   <div class="tab-bar-item">       <slot name="item-icon"></slot>       <slot name="item-icon-active"></slot>       <slot name="item-text"></slot>   </div> </template>  <script>   export default {     name: "TabBarItem",   } </script>  <style scoped>    .tab-bar-item{     flex: 1;     text-align: center;     height: 49px;   }    .tab-bar-item img{     height: 24px;     width: 24px;   }    .activeText{     color: red;   }  </style>  

• 3. 在Vue.app中引用

  使用tab-bar-item组件 , 通过父传子将 path 和 activetext 传递到子组件 , 因为此处是固定的 , 不是一个变量 , 所以可以不动态绑定

  path: 跳转的路径

  activeText: Tabra-Item 选中后的 text 颜色

  在 <Tab-bar-item> 传递2个图片 , 一个是选中的 , 一个是未选中的 , 可以通过具名插槽在 Tabra-Item 组件中通过 v-if 来判断显示哪一个

  <template>   <div id="app">     <router-view></router-view>     <!--使用tab-bar组件-->     <tab-bar>       <!--使用tab-bar-item组件 , 通过父传子将 path 和 activetext 传递到子组件 , 因为此处是固定的 , 不是一个变量 , 所以可以不动态绑定 		path: 跳转的路径 		activeText: Tabra-Item 选中后的 text 颜色 		-->       <tab-bar-item class="tab-bar-item" path="/home" activeText="red">         <!--传递2个图片 , 一个是选中的 , 一个是未选中的 , 可以通过具名插槽在Tabra-Item中通过v-if来判断显示哪一个-->         <img class="" slot="item-icon" src="./assets/img/tabbar/home.svg"/>         <img class="" slot="item-icon-active" src="./assets/img/tabbar/home_active.svg"/>         <div slot="item-text">首页</div>       </tab-bar-item>       <tab-bar-item class="tab-bar-item" path="/category" activeText="red">         <img slot="item-icon" src="./assets/img/tabbar/category.svg"/>         <img slot="item-icon-active" src="./assets/img/tabbar/category_active.svg"/>         <div slot="item-text">分类</div>       </tab-bar-item>       <tab-bar-item class="tab-bar-item" path="/cart" activeText="red">         <img slot="item-icon" src="./assets/img/tabbar/cart.svg"/>         <img slot="item-icon-active" src="./assets/img/tabbar/cart_active.svg"/>         <div slot="item-text">购物车</div>       </tab-bar-item>       <tab-bar-item class="tab-bar-item" path="/profile" activeText="red">         <img slot="item-icon" src="./assets/img/tabbar/profile.svg"/>         <img slot="item-icon-active" src="./assets/img/tabbar/profile_active.svg"/>         <div slot="item-text">我的</div>       </tab-bar-item>     </tab-bar>   </div> </template>  <script>  // 导入组件 import TabBar from './components/tabbar/TabBar' import TabBarItem from './components/tabbar/TabBarItem'  export default {   name: 'App',   components: { //注册组件     TabBar,     TabBarItem   } } </script>  <style>  </style>  

• 4. 我们创建4个对应 Tabra-Item 的组件

  创建4个组件 , 分别是home category cart profile , 通过路由进行跳转 , 既然需要跳转 , 那么就需要监听事件 , 我们在 Tabra-Item 中进行监听

  我们通过 props 属性获取第3步所传入的 path 属性, 通过调用 this.$router.push(this.path); 进行跳转

  我们通过 isActive 函数来判断当前 Tabra-Item 是否处于选中状态 , 如果处于选中状态 , 我们就显示选中的图片也就是显示具名插槽 item-icon-active
  

  通过 setActiveText 函数设置 文本颜色 我们在第3步时传入了一个文本颜色 activeText 我们可以用 :style="setActiveText" 动态绑定 style 的方式从 setActiveText 函数获取到 css 样式

  <template>   <div class="tab-bar-item" @click="ItemClick">     <div v-if="!isActive">       <slot name="item-icon"></slot>     </div>     <div v-else>       <slot name="item-icon-active"></slot>     </div>      <div :style="setActiveText">        <slot name="item-text"></slot>      </div>   </div> </template>  <script>   export default {     name: "TabBarItem",     props: {       path : String,       activeText:{         type: String,         default(){           return "black"         }       }     },     data(){       return {         active: true       }     },     computed: {       isActive() {         // 将route中的 path 和当前的path进行匹配         return this.$route.path.indexOf(this.path) != -1       },       setActiveText() {         // 如果处于激活状态 返回 color: this.activeText         return this.isActive ? {color: this.activeText} : {color: "black"}       }     },     methods: {       ItemClick() {         this.$router.push(this.path);       }     }   } </script>  <style scoped>    .tab-bar-item{     flex: 1;     text-align: center;     height: 49px;   }    .tab-bar-item img{     height: 24px;     width: 24px;   }    .activeText{     color: red;   }  </style>