[Improvement] Card: update slot usage

This commit is contained in:
陈嘉涵 2018-07-31 14:15:24 +08:00
parent 92a98d2322
commit f17a09419f
3 changed files with 12 additions and 20 deletions

View File

@ -53,20 +53,16 @@
| price | 商品价格 | `String | Number` | - | | price | 商品价格 | `String | Number` | - |
| centered | 内容是否垂直居中 | `String` | `false` | | centered | 内容是否垂直居中 | `String` | `false` |
| currency | 货币符号 | `String` | `¥` | | currency | 货币符号 | `String` | `¥` |
| use-desc-slot | 是否使用 desc slot | `Boolean` | `false` |
| use-title-slot | 是否使用 title slot | `Boolean` | `false` |
| use-thumb-slot | 是否使用 thumb slot | `Boolean` | `false` |
| use-footer-slot | 是否使用 footer slot | `Boolean` | `false` |
### Slot ### Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| |-----------|-----------|
| title | 自定义标题 | | title | 自定义标题栏,如果设置了`title``price`属性,则不生效 |
| desc | 自定义描述 | | desc | 自定义描述栏,如果设置了`desc``num`属性,则不生效 |
| tags | 自定义 tags | | thumb | 自定义 thumb如果设置了`thumb`属性,则不生效 |
| thumb | 自定义 thumb |
| footer | 自定义 footer | | footer | 自定义 footer |
| tags | 自定义 tags |
### 外部样式类 ### 外部样式类

View File

@ -22,10 +22,6 @@ Component({
currency: { currency: {
type: String, type: String,
default: '¥' default: '¥'
}, }
useDescSlot: Boolean,
useTitleSlot: Boolean,
useThumbSlot: Boolean,
useFooterSlot: Boolean
} }
}); });

View File

@ -1,22 +1,22 @@
<view class="custom-class van-card"> <view class="custom-class van-card">
<view class="van-card__thumb"> <view class="van-card__thumb">
<slot wx:if="{{ useThumbSlot }}" name="thumb" /> <image wx:if="{{ thumb }}" src="{{ thumb }}" class="van-card__img thumb-class" />
<image wx:else src="{{ thumb }}" class="van-card__img thumb-class" /> <slot wx:else name="thumb" />
</view> </view>
<view class="van-card__content"> <view class="van-card__content">
<slot wx:if="{{ useTitleSlot }}" name="title" /> <view wx:if="{{ title || price }}" class="van-card__row">
<view wx:elseif="{{ title || price }}" class="van-card__row">
<view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view> <view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view>
<view wx:if="{{ price }}" class="van-card__price price-class">{{ currency }} {{ price }}</view> <view wx:if="{{ price }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
</view> </view>
<slot wx:if="{{ useDescSlot }}" name="desc" /> <slot wx:else name="title" />
<view wx:elseif="{{ desc || num }}" class="van-card__row"> <view wx:if="{{ desc || num }}" class="van-card__row">
<view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view> <view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>
<view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view> <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
</view> </view>
<slot wx:else name="desc" />
<slot name="tags" /> <slot name="tags" />
</view> </view>
<view class="van-card__footer" wx:if="{{ useFooterSlot }}"> <view class="van-card__footer">
<slot name="footer" /> <slot name="footer" />
</view> </view>
</view> </view>