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
Use `slot` to custom content.
Use slot to custom content.
```html
<van-card
@ -64,6 +65,7 @@ Use `slot` to custom content.
| desc | Custom description |
| num | Custom num |
| price | Custom price |
| origin-price | Custom origin price |
| thumb | Custom thumb |
| tags | Custom tags |
| footer | Custom footer |

19
packages/card/index.js
View File

@ -23,7 +23,12 @@ export default sfc({
render(h) {
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')}>
{slots.thumb ||
(this.lazyLoad ? (
@ -44,17 +49,17 @@ export default sfc({
const Desc =
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>
);
const OriginPrice = isDef(this.originPrice) && (
<div class={bem('origin-price')}>{`${this.currency} ${this.originPrice}`}</div>
const OriginPrice = showOriginPrice && (
<div class={bem('origin-price')}>
{slots['origin-price'] || `${this.currency} ${this.originPrice}`}
</div>
);
const Num = (slots.num || isDef(this.num)) && (
<div class={bem('num')}>{slots.num || `x ${this.num}`}</div>
);
const Num = showNum && <div class={bem('num')}>{slots.num || `x ${this.num}`}</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
<van-card
@ -64,6 +65,7 @@ Vue.use(Card);
| desc | 自定义描述 |
| num | 自定义数量 |
| price | 自定义价格 |
| origin-price | 自定义商品原价 |
| thumb | 自定义图片 |
| tags | 自定义描述下方的内容 |
| footer | 自定义右下角内容 |