Card 组件支持 thumb slot,加入 flex 布局 (#48)
This commit is contained in:
+16
-17
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user