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

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
+16 -17
View File
@@ -1,18 +1,20 @@
<template>
<div class="van-card">
<img :src="thumb" alt="" class="van-card__img">
<div class="van-card__content" :class="{'van-card__content--center': !this.$slots.footer}">
<div class="van-card__info">
<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 :class="['van-card', { 'van-card--center': !$slots.footer }]">
<div class="van-card__thumb">
<slot name="thumb">
<img :src="thumb" class="van-card__img" />
</slot>
</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>
</template>
@@ -20,10 +22,7 @@
export default {
name: 'van-card',
props: {
thumb: {
type: String,
required: true
},
thumb: String,
title: String,
desc: String
}