18. vue-router案例-tabBar导航 (3)

增加一个计算属性, 当路由和当前跳转路由的路径一致时,处于选中状态, 否则处于未选中状态. 效果如图:

第七步: 抽取导航文字的样式

现在, 我们设置了当导航激活的时候, 文字显示红色, 但是...并不是所有的导航激活的时候都是红色, 所以,我们需要将其动态设置. 也就是, 通过组件从调用方传递一个参数过来.如下所示:

<tab-bar-item path="/home" activeStyle="blue"> <img slot="item-pic" src=""> <img slot="item-pic-active" src=""> <div slot="item-name">首页</div> </tab-bar-item>

增加一个属性activeStyle="blue", 对应的, 我们需要在组件定义的位置增加一个prop属性

props: { path: String, activeStyle: { type: String, default: 'red' } },

在prop属性中增加 activeStyle的样式, 并且设置了默认样式red.

computed: { isActive(){ return this.$route.path.indexOf(this.path) !== -1 }, isActiveStyle() { return this.isActive ? {color: this.activeStyle}:{} } },

在计算属性中增加 一个属性isActiveStyle, 如果当前导航处于激活状态, 则显示样式, 否则没有任何样式
来看看效果, 主要注意文字颜色 变化:

第八步: 进一步组件化

我们来看看App.vue文件

<template> <div> <router-view></router-view> <tab-bar> <tab-bar-item path="/home" activeStyle="blue"> <img slot="item-pic" src="http://www.likecs.com/assets/img/tabBar/1.jpeg"> <img slot="item-pic-active" src="http://www.likecs.com/assets/img/tabBar/4.jpeg"> <div slot="item-name">首页</div> </tab-bar-item> <tab-bar-item path="/category" activeStyle="green"> <img slot="item-pic" src="http://www.likecs.com/assets/img/tabBar/2.jpeg"> <img slot="item-pic-active" src="http://www.likecs.com/assets/img/tabBar/3.jpeg"> <div slot="item-name">分类</div> </tab-bar-item> <tab-bar-item path="/cart" activeStyle="pink"> <img slot="item-pic" src="http://www.likecs.com/assets/img/tabBar/3.jpeg"> <img slot="item-pic-active" src="http://www.likecs.com/assets/img/tabBar/2.jpeg"> <div slot="item-name">购物车</div> </tab-bar-item> <tab-bar-item path="/profile" activeStyle="purple"> <img slot="item-pic" src="http://www.likecs.com/assets/img/tabBar/4.jpeg"> <img slot="item-pic-active" src="http://www.likecs.com/assets/img/tabBar/1.jpeg"> <div slot="item-name">我的</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> @import "./assets/main.css"; </style>

在模板的部分, 内容特别多, 通常App.vue的内容是很简洁的, 所以, 我们还可以将这部分组件进行抽象
将文件抽取到MainTabBar中, 抽取以后注意图片文件以及vue组件的路径

<template> <tab-bar> <tab-bar-item path="/home" activeStyle="blue"> <img slot="item-pic" src=""> <img slot="item-pic-active" src=""> <div slot="item-name">首页</div> </tab-bar-item> <tab-bar-item path="/category" activeStyle="green"> <img slot="item-pic" src=""> <img slot="item-pic-active" src=""> <div slot="item-name">分类</div> </tab-bar-item> <tab-bar-item path="/cart" activeStyle="pink"> <img slot="item-pic" src=""> <img slot="item-pic-active" src=""> <div slot="item-name">购物车</div> </tab-bar-item> <tab-bar-item path="/profile" activeStyle="purple"> <img slot="item-pic" src=""> <img slot="item-pic-active" src=""> <div slot="item-name">我的</div> </tab-bar-item> </tab-bar> </template> <script> import TabBar from "./TabBar"; import TabBarItem from "./TabBarItem"; export default { name: "MainTabBar", components: { TabBar, TabBarItem } } </script> <style scoped> </style>

然后, 在App.vue中引入MainTabBar就可以了

<template> <div> <router-view></router-view> <main-tab-bar></main-tab-bar> </div> </template>

效果和原来是一样

四. 给文件起别名