diff --git a/example/components/demo-block/index.js b/example/components/demo-block/index.js index 908a07be..b9575871 100644 --- a/example/components/demo-block/index.js +++ b/example/components/demo-block/index.js @@ -1,5 +1,7 @@ Component({ properties: { title: String - } + }, + + externalClasses: ['custom-class'] }); diff --git a/example/components/demo-block/index.wxml b/example/components/demo-block/index.wxml index 2a4bff8d..8e57e5d0 100644 --- a/example/components/demo-block/index.wxml +++ b/example/components/demo-block/index.wxml @@ -1,4 +1,4 @@ - + {{ title }} diff --git a/example/pages/card/index.js b/example/pages/card/index.js index 454020c0..593772a5 100644 --- a/example/pages/card/index.js +++ b/example/pages/card/index.js @@ -1,11 +1,5 @@ Page({ data: { - }, - - onLoad: function () { - - }, - - onShow: function() { - }, -}) + imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg' + } +}); diff --git a/example/pages/card/index.json b/example/pages/card/index.json index 9eb3c165..80e3c719 100644 --- a/example/pages/card/index.json +++ b/example/pages/card/index.json @@ -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" } } diff --git a/example/pages/card/index.wxml b/example/pages/card/index.wxml index b2204b5a..5d45e245 100644 --- a/example/pages/card/index.wxml +++ b/example/pages/card/index.wxml @@ -1,27 +1,29 @@ - - - + + + + - - - - - - - 我是自定义内容区域 - - - + + +
+ 按钮 + 按钮 +
+ + + diff --git a/example/pages/card/index.wxss b/example/pages/card/index.wxss index 8b137891..fb202729 100644 --- a/example/pages/card/index.wxss +++ b/example/pages/card/index.wxss @@ -1 +1,12 @@ +.container { + height: 100vh; + background-color: #fff; +} +.card { + margin: 0 -15px; +} + +.button { + margin-right: 5px; +} diff --git a/packages/card/README.md b/packages/card/README.md index fdc66c3a..eec9b0ec 100644 --- a/packages/card/README.md +++ b/packages/card/README.md @@ -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 - + price="2.00" + thumb="{{ imageURL }}" +/> ``` -#### 使用slot -`van-card` 由 `van-card__thumb` 和 `van-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示。两部分内容可以使用slot进行替换。 +#### 高级用法 +可以通过具名`slot`添加定制内容 ```html - - - 我是标题 - +
+ 按钮 + 按钮 +
``` ### 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 | 数量样式类 | diff --git a/packages/card/index.js b/packages/card/index.js index 4def7a79..dd98f734 100644 --- a/packages/card/index.js +++ b/packages/card/index.js @@ -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 } }); diff --git a/packages/card/index.pcss b/packages/card/index.pcss index 5df7f85c..fc7e0a29 100644 --- a/packages/card/index.pcss +++ b/packages/card/index.pcss @@ -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; + } + } +} diff --git a/packages/card/index.wxml b/packages/card/index.wxml index 5f616f22..4bd31b9c 100644 --- a/packages/card/index.wxml +++ b/packages/card/index.wxml @@ -1,33 +1,22 @@ - - - - - + + + + - - - - - - ¥ {{ price }} - - {{ title }} - - - - - x {{ num }} - - {{ desc }} - - - - - {{ status }} - - + + + + {{ title }} + {{ currency }} {{ price }} + + + + {{ desc }} + x {{ num }} + + + + + diff --git a/packages/common/_mixins.pcss b/packages/common/_mixins.pcss index be6d4802..daecf79e 100644 --- a/packages/common/_mixins.pcss +++ b/packages/common/_mixins.pcss @@ -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; +}