本篇将讲解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
