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

feat(GoodsAction): add badge prop, mark info prop as deprecated

Browse Source
This commit is contained in:
chenjiahan 2020-03-17 20:58:06 +08:00
parent 01482f20bc
commit 0dea9e2cb1
4 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/goods-action-icon/index.js
View File

@ -1,4 +1,4 @@
import { createNamespace } from '../utils';
import { createNamespace, isDef } from '../utils';
import { route, routeProps } from '../utils/router';
import { ChildrenMixin } from '../mixins/relation';
import Info from '../info';
@ -16,6 +16,7 @@ export default createComponent({
icon: String,
color: String,
info: [Number, String],
badge: [Number, String],
iconClass: null,
},
@ -27,12 +28,13 @@ export default createComponent({
genIcon() {
const slot = this.slots('icon');
const info = isDef(this.badge) ? this.badge : this.info;
if (slot) {
return (
<div class={bem('icon')}>
{slot}
<Info dot={this.dot} info={this.info} />
<Info dot={this.dot} info={info} />
</div>
);
}
@ -42,7 +44,7 @@ export default createComponent({
class={[bem('icon'), this.iconClass]}
tag="div"
dot={this.dot}
info={this.info}
info={info}
name={this.icon}
color={this.color}
/>

10
src/goods-action/README.md
View File

@ -39,15 +39,15 @@ export default {
}
```
### Icon info
### Icon Badge
Use `info` prop to show badge in icon
Use `badge` prop to show badge in icon
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="Icon1" dot />
<van-goods-action-icon icon="cart-o" text="Icon2" info="5" />
<van-goods-action-icon icon="shop-o" text="Icon3" info="12" />
<van-goods-action-icon icon="cart-o" text="Icon2" badge="5" />
<van-goods-action-icon icon="shop-o" text="Icon3" badge="12" />
<van-goods-action-button type="warning" text="Button1" />
<van-goods-action-button type="danger" text="Button2" />
</van-goods-action>
@ -93,7 +93,7 @@ Use `info` prop to show badge in icon
| color `v2.4.2` | Icon color | *string* | `#323233` |
| icon-class | Icon class name | *any* | `''` |
| dot `2.5.5` | Whether to show red dot | *boolean* | - |
| info | Content of the badge | *number \| string* | - |
| badge `2.5.6` | Content of the badge | *number \| string* | - |
| url | Link | *string* | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - |
| replace | If true, the navigation will not leave a history record | *boolean* | `false` |

9
src/goods-action/README.zh-CN.md
View File

@ -41,13 +41,13 @@ export default {
### 徽标提示
在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
在 GoodsActionIcon 组件上设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" dot />
<van-goods-action-icon icon="cart-o" text="购物车" info="5" />
<van-goods-action-icon icon="shop-o" text="店铺" info="12" />
<van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
<van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
<van-goods-action-button type="warning" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
@ -97,7 +97,8 @@ export default {
| color `v2.4.2` | 图标颜色 | *string* | `#323233` |
| icon-class | 图标额外类名 | *any* | - |
| dot `2.5.5` | 是否显示图标右上角小红点 | *boolean* | `false` |
| info | 图标右上角徽标的内容 | *number \| string* | - |
| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - |
| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - |
| url | 点击后跳转的链接地址 | *string* | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |

10
src/goods-action/demo/index.vue
View File

@ -25,11 +25,11 @@
</van-goods-action>
</demo-block>
<demo-block :title="$t('iconInfo')">
<demo-block :title="$t('iconBadge')">
<van-goods-action>
<van-goods-action-icon icon="chat-o" dot :text="$t('icon1')" />
<van-goods-action-icon icon="cart-o" info="5" :text="$t('icon2')" />
<van-goods-action-icon icon="shop-o" info="12" :text="$t('icon3')" />
<van-goods-action-icon icon="cart-o" badge="5" :text="$t('icon2')" />
<van-goods-action-icon icon="shop-o" badge="12" :text="$t('icon3')" />
<van-goods-action-button type="warning" :text="$t('button1')" />
<van-goods-action-button type="danger" :text="$t('button2')" />
</van-goods-action>
@ -81,7 +81,7 @@ export default {
icon3: '店铺',
button1: '加入购物车',
button2: '立即购买',
iconInfo: '徽标提示',
iconBadge: '徽标提示',
collected: '已收藏',
clickIcon: '点击图标',
clickButton: '点击按钮',
@ -94,7 +94,7 @@ export default {
icon3: 'Icon3',
button1: 'Button1',
button2: 'Button2',
iconInfo: 'Icon info',
iconBadge: 'Icon Badge',
collected: 'Collected',
clickIcon: 'Click Icon',
clickButton: 'Click Button',