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

[bugfix] Card: desc ellipsis (#1179)

Browse Source
This commit is contained in:
neverland 2019-01-02 21:41:11 +08:00 committed by GitHub
parent ec80527423
commit ae8dcf0b28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
example/pages/card/index.wxml
View File

@ -4,32 +4,24 @@
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
title="2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男"
thumb="{{ imageURL }}"
/>
</demo-block>
<demo-block title="没有商品图片">
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
/>
</demo-block>
<demo-block title="高级用法">
<van-card
num="2"
tag="标签"
price="2.00"
origin-price="3.00"
origin-price="10.00"
desc="描述信息"
title="商品标题"
title="2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男"
thumb="{{ imageURL }}"
>
<view slot="tags">
<van-tag plain type="danger">满减</van-tag>
<van-tag plain type="danger" custom-class="tag">标签1</van-tag>
<van-tag plain type="danger">标签2</van-tag>
</view>
<view slot="footer" class="van-card__footer">
<van-button size="mini" round custom-class="button">按钮</van-button>

1
example/pages/card/index.wxss
View File

@ -3,6 +3,7 @@
background-color: #fff;
}
.tag,
.button {
margin-right: 5px;
}

2
packages/card/README.md
View File

@ -31,7 +31,7 @@
<van-card
num="2"
tag="标签"
price="2.00"
price="10.00"
desc="描述信息"
title="商品标题"
thumb="{{ imageURL }}"

20
packages/card/index.less
View File

@ -2,19 +2,21 @@
.van-card {
position: relative;
display: flex;
padding: 5px 15px;
font-size: 12px;
color: @text-color;
background: @background-color-light;
box-sizing: border-box;
flex-wrap: wrap;
background-color: @background-color-light;
&--center {
align-items: center;
justify-content: center;
}
&__header {
display: flex;
}
&__thumb {
position: relative;
width: 90px;
@ -34,23 +36,25 @@
&__content {
position: relative;
height: 90px;
flex: 1;
height: 90px;
min-width: 0; /* hack for flex box ellipsis */
}
&__title,
&__desc {
line-height: 17px;
word-break: break-all;
}
&__title {
max-height: 34px;
max-height: 32px;
line-height: 16px;
font-weight: bold;
}
&__desc {
max-height: 17px;
max-height: 20px;
line-height: 20px;
color: @gray-darker;
}
@ -59,7 +63,7 @@
bottom: 0;
left: 0;
width: 100%;
line-height: 17px;
line-height: 18px;
}
&__price {

58
packages/card/index.wxml
View File

@ -1,36 +1,38 @@
<view class="custom-class van-card {{ centered ? 'van-card--center' : '' }}">
<view class="van-card__thumb" bind:tap="onClickThumb">
<image
wx:if="{{ thumb }}"
src="{{ thumb }}"
mode="{{ thumbMode }}"
lazy-load="{{ lazyLoad }}"
class="van-card__img thumb-class"
/>
<slot name="thumb" />
<van-tag
wx:if="{{ tag }}"
mark
type="danger"
custom-class="van-card__tag"
>
{{ tag }}
</van-tag>
</view>
<view class="van-card__header">
<view class="van-card__thumb" bind:tap="onClickThumb">
<image
wx:if="{{ thumb }}"
src="{{ thumb }}"
mode="{{ thumbMode }}"
lazy-load="{{ lazyLoad }}"
class="van-card__img thumb-class"
/>
<slot name="thumb" />
<van-tag
wx:if="{{ tag }}"
mark
type="danger"
custom-class="van-card__tag"
>
{{ tag }}
</van-tag>
</view>
<view class="van-card__content">
<view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
<slot wx:else name="title" />
<view class="van-card__content">
<view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
<slot wx:else name="title" />
<view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
<slot wx:else name="desc" />
<view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
<slot wx:else name="desc" />
<slot name="tags" />
<slot name="tags" />
<view class="van-card__bottom">
<view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
<view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
<view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
<view class="van-card__bottom">
<view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
<view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
<view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
</view>
</view>
</view>