blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Card 组件支持 thumb slot，加入 flex 布局 (#48)

Browse Source
This commit is contained in:
neverland 2017-07-04 15:46:54 +08:00 committed by 张敏
parent bce1f2dce4
commit 2584fb8b04
3 changed files with 92 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/examples-docs/card.md
View File

@ -86,4 +86,5 @@ export default {
| title | 自定义标题 | | title | 自定义标题 |
| desc | 自定义描述 | | desc | 自定义描述 |
| tags | 自定义tags | | tags | 自定义tags |
| thumb | 自定义thumb |
| footer | 自定义footer | | footer | 自定义footer |

33
packages/card/src/card.vue
View File

@ -1,18 +1,20 @@
<template> <template>
<div class="van-card"> <div :class="['van-card', { 'van-card--center': !$slots.footer }]">
<img :src="thumb" alt="" class="van-card__img"> <div class="van-card__thumb">
<div class="van-card__content" :class="{'van-card__content--center': !this.$slots.footer}"> <slot name="thumb">
<div class="van-card__info"> <img :src="thumb" class="van-card__img" />
<slot name="title"> </slot>
<h4 v-text="title" class="van-card__title"></h4>
</slot>
<slot name="desc">
<p v-if="desc" v-text="desc" class="van-card__desc"></p>
</slot>
<slot name="tags"></slot>
</div>
<slot name="footer"></slot>
</div> </div>
<div class="van-card__content">
<slot name="title">
<h4 v-text="title" class="van-card__title"></h4>
</slot>
<slot name="desc">
<p v-if="desc" v-text="desc" class="van-card__desc"></p>
</slot>
<slot name="tags"></slot>
</div>
<slot name="footer"></slot>
</div> </div>
</template> </template>
@ -20,10 +22,7 @@
export default { export default {
name: 'van-card', name: 'van-card',
props: { props: {
thumb: { thumb: String,
type: String,
required: true
},
title: String, title: String,
desc: String desc: String
} }

150
packages/vant-css/src/card.css
View File

@ -1,93 +1,93 @@
@import './mixins/ellipsis.css'; @import './mixins/ellipsis.css';
@component-namespace van { .van-card {
@b card { color: #333;
padding: 5px 15px 5px 115px; height: 90px;
height: 90px; background: #fafafa;
background: #FAFAFA; position: relative;
overflow: hidden; padding: 5px 15px 5px 115px;
position: relative;
&:not(:first-child) {
margin-top: 10px; margin-top: 10px;
}
&:first-child { &--center,
margin-top: 0; &__thumb {
align-items: center;
justify-content: center;
}
&__thumb {
top: 5px;
left: 15px;
width: 90px;
height: 90px;
position: absolute;
img {
border: none;
max-width: 100%;
max-height: 100%;
} }
}
@e img { &,
width: 90px; &__thumb,
height: auto; &__row {
border: 0; display: flex;
position: absolute; }
top: 5px;
left: 15px; &__content {
width: 100%;
&--center {
height: 90px;
align-items: center;
} }
}
@e content { &__title,
display: table; &__desc {
width: 100%; line-height: 20px;
word-break: break-all;
}
@m center { &__title {
display: table; max-height: 40px;
height: 90px; @mixin multi-ellipsis 2;
}
.van-card__info { &__desc {
display: table-cell; color: #666;
vertical-align: middle; font-size: 12px;
} max-height: 20px;
} @mixin multi-ellipsis 1;
} }
@e row { &__price,
overflow: hidden; &__num {
padding-right: 80px; flex: 1;
position: relative; min-width: 80px;
} line-height: 20px;
text-align: right;
}
@e title { &__price {
line-height: 20px; font-size: 14px;
color: #333; }
max-height: 40px;
margin-bottom: 5px;
word-break: break-all;
@mixin multi-ellipsis 2;
}
@e desc { &__num {
font-size: 12px; color: #666;
color: #666; font-size: 12px;
max-height: 20px; }
word-break: break-all;
@mixin multi-ellipsis 1;
}
@e price { &__footer {
position: absolute; right: 15px;
top: 0; bottom: 5px;
right: 0; position: absolute;
width: 80px;
text-align: right;
font-size: 14px;
color: #333;
}
@e num { .van-button {
position: absolute; margin-left: 5px;
top: 0;
right: 0;
width: 80px;
text-align: right;
font-size: 12px;
color: #666;
}
@e footer {
position: absolute;
right: 15px;
bottom: 5px;
.van-button {
margin-left: 5px;
}
} }
} }
} }