mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
feat(GridItem): add badge prop, mark info prop as deprecated
This commit is contained in:
parent
0dea9e2cb1
commit
db94b20c82
@ -1,5 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace, addUnit } from '../utils';
|
||||
import { createNamespace, addUnit, isDef } from '../utils';
|
||||
import { BORDER } from '../utils/constant';
|
||||
import { route, routeProps } from '../utils/router';
|
||||
|
||||
@ -22,6 +22,7 @@ export default createComponent({
|
||||
icon: String,
|
||||
iconPrefix: String,
|
||||
info: [Number, String],
|
||||
badge: [Number, String],
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -70,12 +71,13 @@ export default createComponent({
|
||||
|
||||
genIcon() {
|
||||
const iconSlot = this.slots('icon');
|
||||
const info = isDef(this.badge) ? this.badge : this.info;
|
||||
|
||||
if (iconSlot) {
|
||||
return (
|
||||
<div class={bem('icon-wrapper')}>
|
||||
{iconSlot}
|
||||
<Info dot={this.dot} info={this.info} />
|
||||
<Info dot={this.dot} info={info} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -85,7 +87,7 @@ export default createComponent({
|
||||
<Icon
|
||||
name={this.icon}
|
||||
dot={this.dot}
|
||||
info={this.info}
|
||||
info={info}
|
||||
size={this.parent.iconSize}
|
||||
class={bem('icon')}
|
||||
classPrefix={this.iconPrefix}
|
||||
|
@ -87,12 +87,12 @@ Vue.use(GridItem);
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### Show Info
|
||||
### Show Badge
|
||||
|
||||
```html
|
||||
<van-grid :column-num="2">
|
||||
<van-grid-item icon="home-o" text="Text" dot />
|
||||
<van-grid-item icon="search" text="Text" info="99+" />
|
||||
<van-grid-item icon="search" text="Text" badge="99+" />
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
@ -118,7 +118,7 @@ Vue.use(GridItem);
|
||||
| icon | Icon name or URL | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` |
|
||||
| info `v2.2.1` | Content of the badge | *number \| string* | - |
|
||||
| badge `v2.5.6` | Content of the badge | *number \| string* | - |
|
||||
| url | Link URL | *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` |
|
||||
|
@ -103,14 +103,14 @@ Vue.use(GridItem);
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 提示信息
|
||||
### 徽标提示
|
||||
|
||||
设置`dot`属性后,会在图标右上角展示一个小红点。设置`info`属性后,会在图标右上角展示相应的徽标
|
||||
设置`dot`属性后,会在图标右上角展示一个小红点。设置`badge`属性后,会在图标右上角展示相应的徽标
|
||||
|
||||
```html
|
||||
<van-grid :column-num="2">
|
||||
<van-grid-item icon="home-o" text="文字" dot />
|
||||
<van-grid-item icon="search" text="文字" info="99+" />
|
||||
<van-grid-item icon="search" text="文字" badge="99+" />
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
@ -136,7 +136,8 @@ Vue.use(GridItem);
|
||||
| icon | [图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀,同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` |
|
||||
| info `v2.2.1` | 图标右上角徽标的内容 | *number \| string* | - |
|
||||
| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - |
|
||||
| info `2.2.1` | 图标右上角徽标的内容(已废弃,请使用 badge 属性) | *number \| string* | - |
|
||||
| url | 点击后跳转的链接地址 | *string* | - |
|
||||
| to | 点击后跳转的目标路由对象,同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
|
||||
| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |
|
||||
|
@ -78,10 +78,10 @@
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showInfo')">
|
||||
<demo-block :title="$t('showBadge')">
|
||||
<van-grid :column-num="2">
|
||||
<van-grid-item icon="home-o" :text="$t('text')" dot />
|
||||
<van-grid-item icon="search" :text="$t('text')" info="99+" />
|
||||
<van-grid-item icon="search" :text="$t('text')" badge="99+" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
customContent: '自定义内容',
|
||||
urlRoute: 'URL 跳转',
|
||||
vueRoute: '路由跳转',
|
||||
showInfo: '提示信息',
|
||||
showBadge: '徽标提示',
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Text',
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
customContent: 'Custom Content',
|
||||
urlRoute: 'URL',
|
||||
vueRoute: 'Vue Router',
|
||||
showInfo: 'Show Info',
|
||||
showBadge: 'Show Badge',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user