app ziroom 的 Vue 重構（三）
阿新 • • 發佈：2018-12-23
原始碼地址：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' 拷入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"> 在公共樣式裡面新增.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寫個後臺。