上一章有童鞋提到為什么不通過路由的方式來跳轉？其實我想說的是，這個分享才剛剛開始，大家不要著急！這一章節我們將帶大家完成，創建header組件，以及tabbar的路由跳轉。
vue專題目錄：
1-vuejs2.0實戰：仿豆瓣app項目，創建自定義組件tabbar
創建header組件
我們先來分析一下豆瓣app:
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
首頁的header背景是綠色的，并且有一個搜索框，其他頁面都是灰色的背景，在header的左側，是一個返回按鈕，右側，有分享或者評論等圖標，中間就是header的標題。我們先不做有搜索框的header。
我們先在components文件中創建一個header.vue文件，并且在less文件里新建一個顏色變量var.less（統一管理app的顏色，保持統一），我們先將有其他元素的組件的大致框架，以及樣式先寫出來。然后在index.vue里面引入。
//var.less
//APP默認顏色
@defaultColor:#42bd56;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);
//tabbar
@tabbarActiveColor: @defaultColor;
//header.vue
<template>
<header class="m-header is-bg is-fixed" >
<div class="m-header-button is-left">
<a href="javascript:;">
< img class="m-icon-img" src="../../assets/images/ic_bar_back_white.png"/>返回</a>
</div>
<h1 class="m-header-title">豆瓣app</h1>
<div class="m-header-button is-right">
<a href="javascript:;">分享</a>
</div>
</header>
</template>
<script>
</script>
<style lang="less">
/*導入顏色變量*/
@import "../assets/less/var.less";
.m-header{
display: flex;
align-items: center;
height: 44px;
padding: 0 10px;
background: #fff;
color: @headerDefaultColor;
border-bottom:1px solid #eee;
a{
color: @headerDefaultColor;
}
.m-header-button{
width: 70px;
align-items:stretch;
&.is-left{
text-align: left;
}
&.is-right{
text-align: right;
}
.m-icon-img{
width: 20px;
height: 20px;
}
.margin-right-10{
margin-right: 10px;
}
}
.m-header-title{
flex: 1;
text-align: center;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&.is-bg{
background:@headerBg;
color: #fff;
a{color: #fff;}
.m-header-title{
color: #fff;
}
}
&.is-fixed{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 9;
}
}
</style>
下圖就是我們完成后的截圖：
Paste_Image.png
is-bg:是否顯示背景色，默認是綠色
is-fixed:是否顯示在頂部
去掉is-bg,顯示白色背景的header組件
Paste_Image.png
由于上一章tarbar組件沒有用到var.less，那么在這里也統一改一下
//tabbar.vue
<style lang="less">
@import "../assets/less/var.less";
.m-tabbar-item{
flex: 1;
text-align: center;
.m-tabbar-item-icon{
display: block;
padding-top: 2px;
img{
width: 28px;
height: 28px;
}
}
.m-tabbar-item-text{
display: block;
font-size: 10px;
color:#949494;
}
&.is-active{
.m-tabbar-item-text{
color: @tabbarActiveColor;
}
}
}
</style>
如果我們需要更換整個app的顏色，只需要在var.less更改相應的變量就可以了。例如：
改成黃色
//var.less
//APP默認顏色
@defaultColor:#f6c210;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);
//tabbar
@tabbarActiveColor: @defaultColor;
Paste_Image.png
改成紅色
//var.less
//APP默認顏色
@defaultColor:#ff0000;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);
//tabbar
@tabbarActiveColor: @defaultColor;
Paste_Image.png
是不是非常的方便！！！
接下來我們就來把header改造成可以配置屬性的組件，可以傳遞props(title,fixed,bg),
<template>
<header class="m-header" :class="{'is-bg':bg,'is-fixed':fixed}">
<div class="m-header-button is-left">
<slot name="left"></slot>
</div>
<h1 class="m-header-title" v-text="title"></h1>
<div class="m-header-button is-right">
<slot name="right"></slot>
</div>
</header>
</template>
<script>
export default{
props:{
title:{
type:String,
default:''
},
bg:{
type:Boolean,
default:false
},
fixed:{
type:Boolean,
default:false
}
}
}
</script>
<style lang="less">
/*導入顏色變量*/
@import "../assets/less/var.less";
.m-header{
display: flex;
align-items: center;
height: 44px;
padding: 0 10px;
background: #fff;
color: @headerDefaultColor;
border-bottom:1px solid #eee;
a{
color: @headerDefaultColor;
}
.m-header-button{
width: 70px;
align-items:stretch;
&.is-left{
text-align: left;
}
&.is-right{
text-align: right;
}
.m-icon-img{
width: 20px;
height: 20px;
}
.margin-right-10{
margin-right: 10px;
}
}
.m-header-title{
flex: 1;
text-align: center;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
&.is-bg{
background:@headerBg;
color: #fff;
a{color: #fff;}
.m-header-title{
color: #fff;
}
}
&.is-fixed{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 9;
}
}
</style>
大功告成！我們就來調用吧！
<m-header title="豆瓣app" :bg="true">
<a href="javascript:;" slot="left">< img class="m-icon-img" src="../../assets/images/ic_bar_back_white.png"/>返回</a>
<a href="javascript:;" slot="right">分享</a>
</m-header>
<m-header title="豆瓣app" :bg="true">
<a href="javascript:;" slot="left">< img class="m-icon-img" src="../../assets/images/ic_bar_back_white.png"/>返回</a>
<a href="javascript:;" slot="right">分享</a>
</m-header>
<m-header title="豆瓣app" fixed>
<a href="javascript:;" slot="left">< img class="m-icon-img" src="../../assets/images/ic_bar_back_green.png"/>返回</a>
<a href="javascript:;" slot="right">< img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a>
<a href="javascript:;" slot="right">< img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/></a>
</m-header>
改造tabbar,完成路由跳轉
上一章我們只完成了tabbar點擊改變顏色，那么如何通過路由來進行跳轉頁面呢？
我們先新建底部tabbar的路由頁面，豆瓣app這個項目說大不大說小也不小，為了規劃好結構，我們將每一個路由都新建一個文件夾，然后在文件夾里面，新建這個頁面。在每個頁面都添加不同的header組件，如圖所示：
Paste_Image.png
然后在每一個路由頁面里面，我們都添加上header組件。
擁有header組件的示例：
Mine.vue
<template>
<div>
<m-header title="我的" fixed>
<a href="javascript:;" slot="right">< img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a>
<a href="javascript:;" slot="right">< img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/></a>
</m-header>
</div>
</template>
<script>
import mHeader from '../../components/header'
export default {
name: 'mine',
components: {
mHeader
}
}
</script>
路由的頁面完成后我們就需要在router文件夾下面的index.js里面，來配置頁面路由。如下：
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/Index/Index'
import Broadcast from '../pages/Broadcast/Broadcast'
import AudioBook from '../pages/AudioBook/AudioBook'
import Group from '../pages/Group/Group'
import Mine from '../pages/Mine/Mine'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
},
{
path: '/broadcast',
name: 'Broadcast',
component: Broadcast
},
{
path: '/audioBook',
name: 'AudioBook',
component: AudioBook
},
{
path: '/group',
name: 'Group',
component: Group
},
{
path: '/mine',
name: 'Mine',
component: Mine
},
{
path: '/Index',
redirect: '/'
},
{
path: '*',
redirect: '/'
},
]
})
我們可以在瀏覽器輸入配置的這個路由地址來訪問這個頁面是否存在。如果不存在詳細檢查路徑是否正確。
接下來我們就來改造tabbar實現路由跳轉。我們先將index.vue里的tabbar組件移入到app.vue里面，并且將每一個id改成對應的路由，添加一個isRouter屬性，來判斷當前item是否是路由跳轉。然后在tabbar-item.vue里我們在props添加isRouter，click點擊跳轉的方法放到methods里面，并且根據傳遞的isRouter判斷當前是否通過路由跳轉
App.vue
<template>
<div id="app">
<router-view></router-view>
<m-tabbar v-model="select">
<m-tabbar-item id='Index' isRouter>
< img src="./assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_home_active.png" alt="" slot="icon-active">
首頁
</m-tabbar-item>
<m-tabbar-item id='AudioBook' isRouter>
< img src="./assets/images/ic_tab_subject_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_subject_active.png" alt="" slot="icon-active">
書影音
</m-tabbar-item>
<m-tabbar-item id='Broadcast' isRouter>
< img src="./assets/images/ic_tab_status_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_status_active.png" alt="" slot="icon-active">
廣播
</m-tabbar-item>
<m-tabbar-item id='Group' isRouter>
< img src="./assets/images/ic_tab_group_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_group_active.png" alt="" slot="icon-active">
小組
</m-tabbar-item>
<m-tabbar-item id='Mine' isRouter>
< img src="./assets/images/ic_tab_profile_normal.png" alt="" slot="icon-normal">
< img src="./assets/images/ic_tab_profile_active.png" alt="" slot="icon-active">
我的
</m-tabbar-item>
</m-tabbar>
</div>
</template>
<script>
import mTabbar from './components/tabbar'
import mTabbarItem from './components/tabbar-item'
export default {
name: 'app',
components:{
mTabbar,
mTabbarItem
},
data() {
return {
select:"Index"
}
}
}
</script>
<style>
</style>
tabbar-item.vue
<template>
<a class="m-tabbar-item" :class="{'is-active':isActive}" @click="goToRouter">
<span class="m-tabbar-item-icon" v-show="!isActive"><slot name="icon-normal"></slot></span>
<span class="m-tabbar-item-icon" v-show="isActive"><slot name="icon-active"></slot></span>
<span class="m-tabbar-item-text"><slot></slot></span>
</a>
</template>
<script>
export default{
props: {
id:{
type:String
},
isRouter:{
type:Boolean,
default:false
}
},
computed: {
isActive(){
if(this.$parent.value===this.id){
return true;
}
}
},
methods:{
goToRouter(){
this.$parent.$emit('input',this.id)
//判斷是否為路由跳轉
if(this.isRouter){
//根據id跳轉到對應的路由頁面
this.$router.push(this.id)
}
}
}
}
</script>
<style lang="less">
@import "../assets/less/var.less";
.m-tabbar-item{
flex: 1;
text-align: center;
.m-tabbar-item-icon{
display: block;
padding-top: 2px;
img{
width: 28px;
height: 28px;
}
}
.m-tabbar-item-text{
display: block;
font-size: 10px;
color:#949494;
}
&.is-active{
.m-tabbar-item-text{
color: @tabbarActiveColor;
}
}
}
</style>
tabbar.vue
通過計算返回當前路由的值
<template>
<div class="m-tabbar">
<slot></slot>
</div>
</template>
<script>
import mTabbarItem from './tabbar-item';
export default {
props: ['value'],
computed:{
value(){
return this.$route.matched[0].name
}
}
}
</script>
<style lang="less">
.m-tabbar{
display: flex;
flex-direction: row;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
height: 50px;
background: #fff;
border-top: 1px solid #e4e4e4;
}
</style>
路由跳轉就完成了，如圖：
錄像1_轉.gif
git地址：
https://github.com/MrMoveon/doubanApp
第二章源碼
鏈接: http://pan.baidu.com/s/1kUElWX5 密碼: sp4i
vue專題目錄：
1-vuejs2.0實戰：仿豆瓣app項目，創建自定義組件tabbar
下一章預告：創建swipe組件
請關注作者，能及時看到分享的vue教程
