app ziroom 的 Vue 重构（三）

源代码地址：https://github.com/BokeChen/Vue-ziroom
接着讲：合租/整租 home页面的实现
4.编写Footer 公共组件
从页面布局来看，可以看出Footer是通过position：fixed来定位的，而且其他页面都有。所以把它归类为公共组件。
在src 的components下面新建Footer.vue 文件。

<template>
  <div class="footer">
  
  </div>
</template>

<script>
export default {
  name: 'Footer',
  
  data () {
    return {
    
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import '../style/mixin.less';
  .footer{
     
  }
</style>

拷入footer用到的雪碧图（IconList1.png）到src的assets文件夹下面。IconList1.png 是通过手机截图然后ps切出来的整合的图片。手机截出来的原图是手机屏幕的两倍，为了省事，我修改了html的视口比例，设置initial-scale=0.5。这样css的尺寸就可以直接用截图的尺寸了。
footer公共组件创建好后，需要在首页里面引用。
home里面的引用：

<template>
  ...
    <Footer activeTapIndex="0"></Footer>
...
</template>
<script>
import Footer from '../../components/Footer.vue';
export default {
 ...
 mponents:{
        Footer,//子组件声明
    }
 ...
}
</script>

Footer:

<template>
  <div class="footer">
     <ul class="footer-ul">
      <li v-for="(item ,index) in links">
      
        <router-link v-bind:to="item" v-bind:class="(index==activeTapIndex)?('activeColor'+index):''">
         <i class="footer-Icon"></i>
         <p> {{linkContent[index]}}</p>
        </router-link>
      </li>
     </ul>
  </div>
</template>

<script>
export default {
  name: 'Footer',
   props: ["activeTapIndex"],//父组件的传值，告诉子组件要激活的选项
  data () {
    return {
      links: ['/home','/apartment','/postStacks','lifeService','/main'],//导航的路由
      linkContent: ['合租/整租','自如寓','民宿/驿栈','生活服务','我的'],//导航栏文字说明
    }
    } 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import '../style/mixin.less';//引进@rootFontSize等一些基本设定值
  .footer{
      height:120rem/@rootFontSize;
      width:100%;
      background-color:white;
     ul{
         display:flex;
         justify-content: space-between;
           p{color:@comonColorGray;}
      }

        //li 单独放出来了是为了缩减选择器的层级，推荐选择器的层级最好不大于3级
         li{
            padding-top:24rem/@rootFontSize;
            width:20%;
            text-align: center;
            .footer-Icon{
              display:inline-block;
              width:49rem/@rootFontSize;
              height:45rem/@rootFontSize;
              background:url(../assets/IconList1.png) no-repeat 0 0;
              background-size:736rem/@rootFontSize 518rem/@rootFontSize; //限制背景图的大小
            }
          }
         li:nth-child(1) .footer-Icon{
           background-position: 0 0;//雪碧图的取图方法
         }
         li:nth-child(2) .footer-Icon{
           background-position: -149rem/@rootFontSize 0;//雪碧图的取图方法
       
         }
         li:nth-child(3) .footer-Icon{
           background-position: -299rem/@rootFontSize 0;//雪碧图的取图方法
         }
         li:nth-child(4) .footer-Icon{
           background-position: -446rem/@rootFontSize 0;//雪碧图的取图方法
         }
         li:nth-child(5) .footer-Icon{
           background-position: -594rem/@rootFontSize 0;//雪碧图的取图方法
         }
     

     .activeColor0{
        p{color:@comonColorBlack;}//被激活的菜单，字体变黑显示
        .footer-Icon{
           background-position: 5rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
        }}
         .activeColor1{
        p{color:@comonColorBlack;}//被激活的菜单，字体变黑显示
        .footer-Icon{
           background-position: -149rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
        }}
         .activeColor2{
        p{color:@comonColorBlack;}//被激活的菜单，字体变黑显示
        .footer-Icon{
           background-position: -299rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
        }}
         .activeColor3{
        p{color:@comonColorBlack;}//被激活的菜单，字体变黑显示
        .footer-Icon{
           background-position: -446rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
        }}
         .activeColor4{
        p{color:@comonColorBlack;}//被激活的菜单，字体变黑显示
        .footer-Icon{
           background-position: 594rem/@rootFontSize -70rem/@rootFontSize !important;//雪碧图的取图方法
        }}
  }
</style>

在公共样式里面添加.footer的类设置
common.less:

...
.footer{
    position:fixed;
    bottom:0;
    left:0;
  }

运行后的效果图：

5.编写Header公共组件
在components文件夹下面添加Header.vue 。header.vue 所需要的背景图放置的assets文件夹下面。

Header.vue:
<template>
  <header class="header">
    <div>
     <p v-if="bannerScrollTop<50">
      <img class="header-logo" v-bind:src="require('../assets/ziroomlogo.png')"/>
      <span class="header-province">{{province}}</span>
     </p>
     <p v-else>
     <i class="header-serchIcon"></i>
      <input class="header-searchInp" type="text"  />
     </p>
     
      <span class="header-msgTip"></span>
      </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
   props: ["bannerScrollTop","searchInputShow","province"],//父组件的传值，告诉子组件要激活的选项
  data () {
    return {
   
    }
    } 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import '../style/mixin.less';//引进@rootFontSize等一些基本设定值
  .header{
    width:100%;
    height:76rem/@rootFontSize;
    line-height:70rem/@rootFontSize;
    background-color:@comonColorWhite;
   div{
    
    position:relative;
    p{height:100%;line-height:76rem/@rootFontSize;}
    .header-logo{
     padding-left:28rem/@rootFontSize;
     padding-right:30rem/@rootFontSize;
     padding-top:19rem/@rootFontSize;
    }
    .header-province{
      font-size:24rem/@rootFontSize;
      padding-right:24rem/@rootFontSize;
      
      background:url(../assets/IconList1.png) no-repeat -43rem/@rootFontSize -138rem/@rootFontSize;
      background-size:@IconListWidth @IconListheight;
    }
    .header-msgTip{
      position:absolute;
      top:19rem/@rootFontSize;
      right:26rem/@rootFontSize;
      width:38rem/@rootFontSize;
      height:38rem/@rootFontSize;
      background:url(../assets/IconList1.png) no-repeat 0rem/@rootFontSize -139rem/@rootFontSize;
      background-size:@IconListWidth @IconListheight;

    }
    .header-searchInp{
      width:631rem/@rootFontSize;
      height:61rem/@rootFontSize;
      border-radius:63rem/@rootFontSize;
      font-size:28rem/@rootFontSize;
      border:none;
      outline:none;
      background-color:@comonColorGray;
      margin-left:29rem/@rootFontSize;
      padding-left:70rem/@rootFontSize;
      padding-right:30rem/@rootFontSize;
    }
    .header-serchIcon{
      position:absolute;
      top:23rem/@rootFontSize;
      left:54rem/@rootFontSize;
      width:32rem/@rootFontSize;
      height:32rem/@rootFontSize;
      background:url(../assets/IconList1.png) no-repeat -156rem/@rootFontSize -146rem/@rootFontSize;
      background-size:@IconListWidth @IconListheight;

    }
   }
  }
</style>

在home.vue 里面引进Header.vue:

<template>
...
<Header bannerScrollTop="0" searchInputShow="1" province="北京"></Header>
...
</template>
<script>
import Header from '../../components/Header.vue';
 export default{
 ...
  components:{
        Footer,//子组件声明
        Header
    }
 ...
}
</script>

在common.less 里面添加固定定位。
common.less

...
.header{
    position:fixed;
    top:0;
    left:0;
    z-index:1;
}
...

Head.vue 组件基本写完，就是还差点样式过渡效果。
其他组件的编写，都差不多这个思路。
现完成的首页的样式效果：

一个人切图拼图量尺寸，写html写样式，再写js，这些活都很需要时间，所以整体进度会有点点慢。如果这些页面都写完，后面我会考虑用nodejs+mySql写个后台。