mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
[breaking change] Card: rewrite
This commit is contained in:
陈嘉涵
parent
746e11ab92
commit
ec748ea53b
@ -1,5 +1,7 @@
|
||||
Component({
|
||||
properties: {
|
||||
title: String
|
||||
}
|
||||
},
|
||||
|
||||
externalClasses: ['custom-class']
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<view class="demo-block">
|
||||
<view class="custom-class demo-block">
|
||||
<view wx:if="{{ title }}" class="demo-block__title">{{ title }}</view>
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Card 卡片",
|
||||
"usingComponents": {
|
||||
"demo-block": "../../components/demo-block/index",
|
||||
"van-card": "../../dist/card/index",
|
||||
"van-panel": "../../dist/panel/index"
|
||||
"van-button": "../../dist/button/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,27 +1,29 @@
|
||||
<van-panel without-border>
|
||||
<van-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="已发货"
|
||||
>
|
||||
</van-card>
|
||||
<view class="container">
|
||||
<demo-block title="基础用法">
|
||||
<van-card
|
||||
title="标题"
|
||||
desc="描述信息"
|
||||
num="2"
|
||||
price="2.00"
|
||||
thumb="{{ imageURL }}"
|
||||
custom-class="card"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
</van-panel>
|
||||
|
||||
<van-panel title="使用slot">
|
||||
<van-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"
|
||||
useThumbSlot="{{ true }}"
|
||||
useDetailSlot="{{ true }}"
|
||||
>
|
||||
<!-- 右侧详情 -->
|
||||
<view slot="detail-slot" class="van-card__detail">
|
||||
我是自定义内容区域
|
||||
</view>
|
||||
</van-card>
|
||||
</van-panel>
|
||||
<demo-block title="高级用法">
|
||||
<van-card
|
||||
title="标题"
|
||||
desc="描述信息"
|
||||
num="2"
|
||||
price="2.00"
|
||||
thumb="{{ imageURL }}"
|
||||
custom-class="card"
|
||||
use-footer-slot="{{ true }}"
|
||||
>
|
||||
<div slot="footer">
|
||||
<van-button size="mini" custom-class="button">按钮</van-button>
|
||||
<van-button size="mini">按钮</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
</demo-block>
|
||||
</view>
|
||||
|
||||
@ -1 +1,12 @@
|
||||
.container {
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@ -1,61 +1,80 @@
|
||||
## Card 卡片
|
||||
|
||||
### 使用指南
|
||||
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-card": "path/to/vant-weapp/dist/card/index"
|
||||
}
|
||||
"usingComponents": {
|
||||
"van-card": "path/to/vant-weapp/dist/card/index"
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
卡片可以用于左侧图片，右侧描述信息的展示。默认是商品相关内容的展示，需要展示其他内容可以使用自定义slot。
|
||||
|
||||
```html
|
||||
<van-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】"
|
||||
title="标题"
|
||||
desc="描述"
|
||||
num="2"
|
||||
desc="3000克 50%"
|
||||
status="已发货"
|
||||
>
|
||||
</van-card>
|
||||
price="2.00"
|
||||
thumb="{{ imageURL }}"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 使用slot
|
||||
`van-card` 由 `van-card__thumb` 和 `van-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示。两部分内容可以使用slot进行替换。
|
||||
#### 高级用法
|
||||
可以通过具名`slot`添加定制内容
|
||||
|
||||
```html
|
||||
<van-card
|
||||
card-class="test-card"
|
||||
useDetailSlot="{{ true }}"
|
||||
title="标题"
|
||||
desc="描述"
|
||||
num="2"
|
||||
price="2.00"
|
||||
thumb="{{ imageURL }}"
|
||||
use-footer-slot="{{ true }}"
|
||||
>
|
||||
<!-- 右侧详情 -->
|
||||
<view slot="detail-slot" class="van-card__detail">
|
||||
我是标题
|
||||
</view>
|
||||
<div slot="footer">
|
||||
<van-button size="mini">按钮</van-button>
|
||||
<van-button size="mini">按钮</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----|-----|-----|-----|
|
||||
| card-class | 自定义最外层class | String | -
|
||||
| thumb | 左侧缩略图 | String | -
|
||||
| price | 商品价格 | String | -
|
||||
| title | 商品标题 | String | -
|
||||
| desc | 商品描述 | String | -
|
||||
| num | 商品数量 | Number | -
|
||||
| status | 商品状态 | String | -
|
||||
| useDetailSlot | 是否使用detail-slot（true时需要添加对应slot） | Boolean | `false`
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| thumb | 左侧图片 | `String` | - |
|
||||
| title | 标题 | `String` | - |
|
||||
| desc | 描述 | `String` | - |
|
||||
| num | 商品数量 | `String | Number` | - |
|
||||
| price | 商品价格 | `String | Number` | - |
|
||||
| centered | 内容是否垂直居中 | `String` | `false` |
|
||||
| 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
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题 |
|
||||
| desc | 自定义描述 |
|
||||
| tags | 自定义 tags |
|
||||
| thumb | 自定义 thumb |
|
||||
| footer | 自定义 footer |
|
||||
|
||||
### 外部样式类
|
||||
| 类名 | 说明 |
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| card-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
|
||||
| thumb-class | 左侧图片自定义样式类，可以通过这个修改图片的展示大小形式 |
|
||||
| custom-class | 根节点样式类 |
|
||||
| thumb-class | 左侧图片样式类 |
|
||||
| title-class | 标题样式类 |
|
||||
| price-class | 价格样式类 |
|
||||
| desc-class | 描述样式类 |
|
||||
| num-class | 数量样式类 |
|
||||
|
||||
@ -3,22 +3,29 @@ Component({
|
||||
multipleSlots: true
|
||||
},
|
||||
|
||||
externalClasses: ['card-class', 'thumb-class'],
|
||||
externalClasses: [
|
||||
'custom-class',
|
||||
'thumb-class',
|
||||
'title-class',
|
||||
'price-class',
|
||||
'desc-class',
|
||||
'num-class'
|
||||
],
|
||||
|
||||
properties: {
|
||||
useThumbSlot: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
useDetailSlot: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
thumb: String,
|
||||
price: String,
|
||||
title: String,
|
||||
num: Number,
|
||||
num: String,
|
||||
desc: String,
|
||||
status: String
|
||||
thumb: String,
|
||||
title: String,
|
||||
price: String,
|
||||
centered: Boolean,
|
||||
currency: {
|
||||
type: String,
|
||||
default: '¥'
|
||||
},
|
||||
useDescSlot: Boolean,
|
||||
useTitleSlot: Boolean,
|
||||
useThumbSlot: Boolean,
|
||||
useFooterSlot: Boolean
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,55 +1,94 @@
|
||||
@import "../color/index.pcss";
|
||||
@import "../helper/index.pcss";
|
||||
@import '../common/var.pcss';
|
||||
@import '../common/_mixins.pcss';
|
||||
|
||||
.van-card {
|
||||
display: flex;
|
||||
margin-left: 0px;
|
||||
padding: 5px 15px;
|
||||
overflow: hidden;
|
||||
color: $text-color;
|
||||
height: 100px;
|
||||
font-size: 16px;
|
||||
background: #fafafa;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
padding: 5px 15px 5px 115px;
|
||||
|
||||
.van-card__thumb {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
}
|
||||
&--center,
|
||||
&__thumb {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.van-card__img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
&__thumb {
|
||||
top: 5px;
|
||||
left: 15px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.van-card__detail {
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
}
|
||||
&__img {
|
||||
border: none;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.van-card__detail-row {
|
||||
overflow: hidden;
|
||||
line-height: 20px;
|
||||
min-height: 20px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
&,
|
||||
&__thumb,
|
||||
&__row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.van-card__right-col {
|
||||
float: right;
|
||||
}
|
||||
&__content {
|
||||
width: 100%;
|
||||
|
||||
.van-card__left-col {
|
||||
margin-right: 80px;
|
||||
}
|
||||
&--center {
|
||||
height: 90px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__desc {
|
||||
line-height: 20px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-height: 40px;
|
||||
|
||||
@mixin multi-ellipsis 2;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
color: $gray-darker;
|
||||
font-size: 12px;
|
||||
max-height: 20px;
|
||||
|
||||
@mixin ellipsis;
|
||||
}
|
||||
|
||||
&__price,
|
||||
&__num {
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__price {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__num {
|
||||
color: $gray-darker;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
right: 15px;
|
||||
bottom: 5px;
|
||||
position: absolute;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,33 +1,22 @@
|
||||
<view class="card-class van-card">
|
||||
<!-- 左侧图片 -->
|
||||
|
||||
<view class="thumb-class van-card__thumb">
|
||||
<image class="van-card__img"
|
||||
src="{{ thumb }}"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="custom-class van-card">
|
||||
<view class="van-card__thumb">
|
||||
<slot wx:if="{{ useThumbSlot }}" name="thumb" />
|
||||
<image wx:else src="{{ thumb }}" class="van-card__img thumb-class" />
|
||||
</view>
|
||||
<!-- 右侧详情 -->
|
||||
<view class="van-card__detail">
|
||||
<slot wx:if="{{ useDetailSlot }}" name="detail-slot"></slot>
|
||||
<block wx:else>
|
||||
<view class="van-card__detail-row">
|
||||
<view class="van-card__right-col">¥ {{ price }}</view>
|
||||
<view class="van-card__left-col van-ellipsis--l2">
|
||||
{{ title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="van-card__detail-row van-c-gray-darker">
|
||||
<view wx:if="{{ num }}" class="van-card__right-col">x {{ num }}</view>
|
||||
<view wx:if="{{ desc }}" class="van-card__left-col">
|
||||
{{ desc }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{ status }}" class="van-card__detail-row">
|
||||
<view class="van-card__left-col van-c-red">{{ status }}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="van-card__content">
|
||||
<slot wx:if="{{ useTitleSlot }}" name="title" />
|
||||
<view wx:elseif="{{ title || price }}" class="van-card__row">
|
||||
<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>
|
||||
<slot wx:if="{{ useDescSlot }}" name="desc" />
|
||||
<view wx:elseif="{{ desc || num }}" class="van-card__row">
|
||||
<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>
|
||||
<slot name="tags" />
|
||||
</view>
|
||||
<view class="van-card__footer" wx:if="{{ useFooterSlot }}">
|
||||
<slot name="footer" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -13,3 +13,17 @@
|
||||
box-sizing: border-box;
|
||||
border: 0 solid $border-retina-color;
|
||||
}
|
||||
|
||||
@define-mixin multi-ellipsis $lines {
|
||||
overflow : hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@define-mixin ellipsis {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user