blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Card: add origin-price slot (#2588)

Browse Source
This commit is contained in:
neverland 2019-01-22 21:53:47 +08:00 committed by GitHub
parent 11cb38b65c
commit d9da76677c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/card/en-US.md
View File

@ -22,7 +22,8 @@ Vue.use(Card);
``` ```
#### Advanced Usage #### Advanced Usage
Use `slot` to custom content.
Use slot to custom content.
```html ```html
<van-card <van-card
@ -64,6 +65,7 @@ Use `slot` to custom content.
| desc | Custom description | | desc | Custom description |
| num | Custom num | | num | Custom num |
| price | Custom price | | price | Custom price |
| origin-price | Custom origin price |
| thumb | Custom thumb | | thumb | Custom thumb |
| tags | Custom tags | | tags | Custom tags |
| footer | Custom footer | | footer | Custom footer |

19
packages/card/index.js
View File

@ -23,7 +23,12 @@ export default sfc({
render(h) { render(h) {
const { thumb, $slots: slots } = this; const { thumb, $slots: slots } = this;
const Thumb = (slots.thumb || thumb) && ( const showThumb = slots.thumb || thumb;
const showNum = slots.num || isDef(this.num);
const showPrice = slots.price || isDef(this.price);
const showOriginPrice = slots['origin-price'] || isDef(this.originPrice);
const Thumb = showThumb && (
<a href={this.thumbLink} class={bem('thumb')}> <a href={this.thumbLink} class={bem('thumb')}>
{slots.thumb || {slots.thumb ||
(this.lazyLoad ? ( (this.lazyLoad ? (
@ -44,17 +49,17 @@ export default sfc({
const Desc = const Desc =
slots.desc || (this.desc && <div class={[bem('desc'), 'van-ellipsis']}>{this.desc}</div>); slots.desc || (this.desc && <div class={[bem('desc'), 'van-ellipsis']}>{this.desc}</div>);
const Price = (slots.price || isDef(this.price)) && ( const Price = showPrice && (
<div class={bem('price')}>{slots.price || `${this.currency} ${this.price}`}</div> <div class={bem('price')}>{slots.price || `${this.currency} ${this.price}`}</div>
); );
const OriginPrice = isDef(this.originPrice) && ( const OriginPrice = showOriginPrice && (
<div class={bem('origin-price')}>{`${this.currency} ${this.originPrice}`}</div> <div class={bem('origin-price')}>
{slots['origin-price'] || `${this.currency} ${this.originPrice}`}
</div>
); );
const Num = (slots.num || isDef(this.num)) && ( const Num = showNum && <div class={bem('num')}>{slots.num || `x ${this.num}`}</div>;
<div class={bem('num')}>{slots.num || `x ${this.num}`}</div>
);
const Footer = slots.footer && <div class={bem('footer')}>{slots.footer}</div>; const Footer = slots.footer && <div class={bem('footer')}>{slots.footer}</div>;

4
packages/card/zh-CN.md
View File

@ -22,7 +22,8 @@ Vue.use(Card);
``` ```
#### 高级用法 #### 高级用法
可以通过具名`slot`添加定制内容
可以通过具名插槽添加定制内容
```html ```html
<van-card <van-card
@ -64,6 +65,7 @@ Vue.use(Card);
| desc | 自定义描述 | | desc | 自定义描述 |
| num | 自定义数量 | | num | 自定义数量 |
| price | 自定义价格 | | price | 自定义价格 |
| origin-price | 自定义商品原价 |
| thumb | 自定义图片 | | thumb | 自定义图片 |
| tags | 自定义描述下方的内容 | | tags | 自定义描述下方的内容 |
| footer | 自定义右下角内容 | | footer | 自定义右下角内容 |