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 |

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

@ -1,8 +1,11 @@
<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>
</div>
<div class="van-card__content">
<slot name="title"> <slot name="title">
<h4 v-text="title" class="van-card__title"></h4> <h4 v-text="title" class="van-card__title"></h4>
</slot> </slot>
@ -13,17 +16,13 @@
</div> </div>
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div>
</template> </template>
<script> <script>
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
} }

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