本篇將講解cell，media-cell組件的創建。
Paste_Image.png
1.組件cell
這里的cell分為三種樣式，左側帶圖標，不帶圖標，以及左側帶豎線的cell。
每一個組件都有一個底部邊框：
這里我們采用了移動端1px像素問題的解決方法：父級元素設置相對定位，構建1個偽元素,設置絕對定位， 將它的長寬放大到2倍, 邊框寬度設置為1px, 再以transform縮放到50%.
&:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
background: #eee;
transform: scaleY(0.5);
}
不同的樣式，我們采用slot內容分發的方式來實現，前幾章以及講得很詳細，這里就不過多的講解
<m-cell title="提醒" icon>
<a href="javascript:;" slot="cell-right"></a>
</m-cell>
<m-cell title="設置">
<a href="javascript:;" slot="cell-right"></a>
</m-cell>
<template>
<div class="m-cell normal" :class="label">
<div class="m-cell-title">
<slot name="icon"></slot> {{title}}
</div>
<div class="m-cell-right">
<slot name="cell-right"></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
hot: {
type: Boolean,
default: false
},
recommend: {
type: Boolean,
default: false
},
icon: {
type: Boolean,
default: false
},
label: {
type: String,
default: 'normal'
}
}
}
</script>
<style lang="less">
.m-cell {
position: relative;
padding: 10px 5px 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
&:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
background: #eee;
transform: scaleY(0.5);
}
.m-cell-title {
font-size: 15px;
img {
width: 20px;
height: 20px;
}
}
.m-cell-right {
font-size: 12px;
a {
color: #666;
}
img {
width: 20px;
height: 20px;
}
}
&.normal {}
&.hot {
padding: 0px 5px 0px 15px;
height: 22px;
&:after {
content: '';
position: absolute;
width: 5px;
left: 0;
top: 0px;
bottom: 0px;
background: #ff8447;
}
&:before {
height: 0
}
}
&.recommend {
padding: 0px 5px 0px 15px;
height: 22px;
&:after {
content: '';
position: absolute;
width: 5px;
left: 0;
top: 0px;
bottom: 0px;
background: #42bd56;
}
&:before {
height: 0
}
}
}
</style>
2.組件media-cell
Paste_Image.png
這里的作者，欄目，圖片通過props傳遞，標題描述通過slot內容分發，圖片采用背景居中的方式來顯示，background-position: center center;background-size: cover;
<m-cell-media author="作者：大象公會" column="來自欄目：廣播精選" img="https://qnmob2.doubanio.com/img/files/file-1489047494.jpg">
<span slot="title">個人意見：為什么中國沒有鮑勃·迪倫這樣的民謠歌手</span>
<span slot="describe">我們這一代人的成長年代，真正的詩歌課從來都是缺席的。</span>
</m-cell-media>
<template>
<div class="m-cell-media-wrap">
<a href="javascript:;">
<div class="m-cell-media-top">
<div class="m-cell-media">
<div class="m-cell-title m-ellipsis-2">
<slot name="title"></slot>
</div>
<div class="m-cell-detail m-ellipsis-2">
<slot name='describe'></slot>
</div>
</div>
<div class="m-pull-right right-img" :style="{'background-image':'url('+img+')'}">
</div>
</div>
<div class="m-cell-media-bottom">
<p v-if="author">作者：{{author}}</p>
<p v-if="column">{{column}}</p>
</div>
</a>
</div>
</template>
<script>
export default {
props: ['author', 'column', 'img']
}
</script>
<style lang="less">
.m-cell-media-wrap {
display: flex;
flex-direction: column;
padding: 18px 20px;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
background: #eee;
transform: scaleY(0.5);
}
.m-cell-media-top {
display: flex;
flex-direction: row;
.m-cell-media {
flex: 1;
padding-right: 45px;
}
.m-cell-title {
font-size: 17px;
line-height: 22px;
color: #333;
font-weight: bold;
}
.m-cell-detail {
font-size: 12px;
padding-top: 12px;
color: #939393;
}
.m-pull-right {
width: 94px;
height: 94px;
overflow: hidden;
background-position: center center;
background-size: cover;
img {
width: 100%;
}
}
}
.m-cell-media-bottom {
display: flex;
justify-content: space-between;
padding-top: 20px;
margin-top: 12px;
color: #bfbfbf;
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 1px;
background: #eee;
}
}
}
</style>
git地址：
https://github.com/MrMoveon/doubanApp
vue專題目錄：
1-vuejs2.0實戰：仿豆瓣app項目，創建自定義組件tabbar
