2-vuejs2.0實戰：仿豆瓣app項目，建立組件header,tabbar路由跳轉

時間  2019-12-15
標籤 vuejs2.0 vuejs 實戰 豆瓣 app 項目 建立 組件 header tabbar 路由 欄目 系統網絡 简体版
原文   原文鏈接

上一章有童鞋提到爲何不經過路由的方式來跳轉？其實我想說的是，這個分享纔剛剛開始，你們不要着急！這一章節咱們將帶你們完成，建立header組件，以及tabbar的路由跳轉。javascript

vue專題目錄：
1-vuejs2.0實戰：仿豆瓣app項目，建立自定義組件tabbarvue

建立header組件

咱們先來分析一下豆瓣app:java

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

首頁的header背景是綠色的，而且有一個搜索框，其餘頁面都是灰色的背景，在header的左側，是一個返回按鈕，右側，有分享或者評論等圖標，中間就是header的標題。咱們先不作有搜索框的header。git

咱們先在components文件中建立一個header.vue文件，而且在less文件裏新建一個顏色變量var.less（統一管理app的顏色，保持統一），咱們先將有其餘元素的組件的大體框架，以及樣式先寫出來。而後在index.vue裏面引入。github

//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>

下圖就是咱們完成後的截圖：vue-router

Paste_Image.png

is-bg:是否顯示背景色，默認是綠色
is-fixed:是否顯示在頂部segmentfault

去掉is-bg,顯示白色背景的header組件瀏覽器

Paste_Image.png

因爲上一章tarbar組件沒有用到var.less，那麼在這裏也統一改一下app

//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>

路由跳轉就完成了，如圖：

錄像1_轉.gif

git地址：
https://github.com/MrMoveon/d...

第二章源碼
連接: http://pan.baidu.com/s/1kUElWX5 密碼: sp4i

vue專題目錄：
1-vuejs2.0實戰：仿豆瓣app項目，建立自定義組件tabbar

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程