mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-05-09 08:58:57 +08:00
72 lines
2.1 KiB
Markdown
72 lines
2.1 KiB
Markdown
## Card 卡片
|
||
|
||
### 使用指南
|
||
在 index.json 中引入组件
|
||
```json
|
||
{
|
||
"usingComponents": {
|
||
"zan-card": "path/to/zanui-weapp/dist/card/index"
|
||
}
|
||
}
|
||
```
|
||
### 代码演示
|
||
|
||
#### 基础用法
|
||
卡片可以用于左侧图片，右侧描述信息的展示。默认是商品相关内容的展示，需要展示其他内容可以使用自定义slot。
|
||
|
||
```html
|
||
<zan-card
|
||
card-class="test-card"
|
||
thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
|
||
price="999.99"
|
||
title="红烧牛肉【虚拟商品】【有库存】【有sku】"
|
||
num="2"
|
||
desc="3000克 50%"
|
||
status="已发货"
|
||
>
|
||
</zan-card>
|
||
```
|
||
|
||
#### 使用slot
|
||
`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示。两部分内容可以使用slot进行替换。
|
||
|
||
```html
|
||
<zan-card
|
||
card-class="test-card"
|
||
useThumbSlot="{{ true }}"
|
||
useDetailSlot="{{ true }}"
|
||
>
|
||
<view slot="thumb-slot" class="zan-card__thumb">
|
||
<image class="zan-card__img"
|
||
src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
|
||
mode="aspectFit"
|
||
></image>
|
||
</view>
|
||
<!-- 右侧详情 -->
|
||
<view slot="detail-slot" class="zan-card__detail">
|
||
<view class="zan-card__detail-row">
|
||
<view class="zan-card__right-col">x 2</view>
|
||
<view class="zan-card__left-col zan-ellipsis--l2">
|
||
我是标题
|
||
</view>
|
||
</view>
|
||
<view class="zan-card__detail-row zan-c-gray-darker">
|
||
<view class="zan-card__left-col">¥ 111</view>
|
||
</view>
|
||
</view>
|
||
</zan-card>
|
||
```
|
||
|
||
### API
|
||
| 参数 | 说明 | 类型 | 默认值 |
|
||
|-----|-----|-----|-----|
|
||
| card-class | 自定义最外层class | String | -
|
||
| thumb | 左侧缩略图 | String | -
|
||
| price | 商品价格 | String | -
|
||
| title | 商品标题 | String | -
|
||
| desc | 商品描述 | String | -
|
||
| num | 商品数量 | Number | -
|
||
| status | 商品状态 | String | -
|
||
| useThumbSlot | 是否使用thumb-slot（true时需要添加对应slot） | Boolean | `false`
|
||
| useDetailSlot | 是否使用detail-slot（true时需要添加对应slot） | Boolean | `false`
|