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

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 { route, routeProps } from '../utils/router';
import { ChildrenMixin } from '../mixins/relation'; import { ChildrenMixin } from '../mixins/relation';
import Info from '../info'; import Info from '../info';
@ -16,6 +16,7 @@ export default createComponent({
icon: String, icon: String,
color: String, color: String,
info: [Number, String], info: [Number, String],
badge: [Number, String],
iconClass: null, iconClass: null,
}, },
@ -27,12 +28,13 @@ export default createComponent({
genIcon() { genIcon() {
const slot = this.slots('icon'); const slot = this.slots('icon');
const info = isDef(this.badge) ? this.badge : this.info;
if (slot) { if (slot) {
return ( return (
<div class={bem('icon')}> <div class={bem('icon')}>
{slot} {slot}
<Info dot={this.dot} info={this.info} /> <Info dot={this.dot} info={info} />
</div> </div>
); );
} }
@ -42,7 +44,7 @@ export default createComponent({
class={[bem('icon'), this.iconClass]} class={[bem('icon'), this.iconClass]}
tag="div" tag="div"
dot={this.dot} dot={this.dot}
info={this.info} info={info}
name={this.icon} name={this.icon}
color={this.color} 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 ```html
<van-goods-action> <van-goods-action>
<van-goods-action-icon icon="chat-o" text="Icon1" dot /> <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="cart-o" text="Icon2" badge="5" />
<van-goods-action-icon icon="shop-o" text="Icon3" info="12" /> <van-goods-action-icon icon="shop-o" text="Icon3" badge="12" />
<van-goods-action-button type="warning" text="Button1" /> <van-goods-action-button type="warning" text="Button1" />
<van-goods-action-button type="danger" text="Button2" /> <van-goods-action-button type="danger" text="Button2" />
</van-goods-action> </van-goods-action>
@ -93,7 +93,7 @@ Use `info` prop to show badge in icon
| color `v2.4.2` | Icon color | *string* | `#323233` | | color `v2.4.2` | Icon color | *string* | `#323233` |
| icon-class | Icon class name | *any* | `''` | | icon-class | Icon class name | *any* | `''` |
| dot `2.5.5` | Whether to show red dot | *boolean* | - | | 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* | - | | url | Link | *string* | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - | | 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` | | 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 ```html
<van-goods-action> <van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" dot /> <van-goods-action-icon icon="chat-o" text="客服" dot />
<van-goods-action-icon icon="cart-o" text="购物车" info="5" /> <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
<van-goods-action-icon icon="shop-o" text="店铺" info="12" /> <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
<van-goods-action-button type="warning" text="加入购物车" /> <van-goods-action-button type="warning" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" /> <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action> </van-goods-action>
@ -97,7 +97,8 @@ export default {
| color `v2.4.2` | 图标颜色 | *string* | `#323233` | | color `v2.4.2` | 图标颜色 | *string* | `#323233` |
| icon-class | 图标额外类名 | *any* | - | | icon-class | 图标额外类名 | *any* | - |
| dot `2.5.5` | 是否显示图标右上角小红点 | *boolean* | `false` | | dot `2.5.5` | 是否显示图标右上角小红点 | *boolean* | `false` |
| info | 图标右上角徽标的内容 | *number \| string* | - | | badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - |
| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - |
| url | 点击后跳转的链接地址 | *string* | - | | url | 点击后跳转的链接地址 | *string* | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | | replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |

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

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