blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-10-27 01:32:10 +08:00
Code Issues Projects Releases Wiki Activity

feat(GridItem): add dot prop (#4426)

Browse Source
This commit is contained in:
neverland 2019-09-11 15:07:45 +08:00 committed by GitHub
parent 21d5127fd7
commit 88338088be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/grid-item/index.js
View File

@ -11,6 +11,7 @@ export default createComponent({
props: {
...routeProps,
dot: Boolean,
text: String,
icon: String,
info: [Number, String]
@ -68,7 +69,10 @@ export default createComponent({
}
return [
this.slots('icon') || (this.icon && <Icon name={this.icon} info={this.info} class={bem('icon')} />),
this.slots('icon') ||
(this.icon && (
<Icon name={this.icon} dot={this.dot} info={this.info} class={bem('icon')} />
)),
this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>)
];
}

3
src/grid/README.md
View File

@ -90,7 +90,7 @@ Vue.use(Grid).use(GridItem);
```html
<van-grid :column-num="2">
<van-grid-item icon="home-o" text="Text" info="5" />
<van-grid-item icon="home-o" text="Text" dot />
<van-grid-item icon="search" text="Text" info="99+" />
</van-grid>
```
@ -114,6 +114,7 @@ Vue.use(Grid).use(GridItem);
|------|------|------|------|------|
| text | Text | *string* | - | - |
| icon | Icon name or URL | *string* | - | - |
| dot | Whether to show red dot | *boolean* | `false` | 2.2.1 |
| info | Content of the badge | *string \| number* | `''` | 2.2.1 |
| url | Link URL | *string* | - | - |
| to | Target route of the link, same as to of vue-router | *string \| object* | - | - |

7
src/grid/README.zh-CN.md
View File

@ -102,13 +102,13 @@ Vue.use(Grid).use(GridItem);
</van-grid>
```
### 显示徽标
### 提示信息
设置`info`属性后，会在图标的右上角显示红色的徽标
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
```html
<van-grid :column-num="2">
<van-grid-item icon="home-o" text="文字" info="5" />
<van-grid-item icon="home-o" text="文字" dot />
<van-grid-item icon="search" text="文字" info="99+" />
</van-grid>
```
@ -132,6 +132,7 @@ Vue.use(Grid).use(GridItem);
|------|------|------|------|------|
| text | 文字 | *string* | - | - |
| icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon) | *string* | - | - |
| dot | 是否显示图标右上角小红点 | *boolean* | `false` | 2.2.1 |
| info | 图标右上角徽标的内容 | *string \| number* | - | 2.2.1 |
| url | 点击后跳转的链接地址 | *string* | - | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |

4
src/grid/demo/index.vue
View File

@ -47,7 +47,7 @@
<demo-block :title="$t('showInfo')">
<van-grid :column-num="2">
<van-grid-item icon="home-o" :text="$t('text')" info="5" />
<van-grid-item icon="home-o" :text="$t('text')" dot />
<van-grid-item icon="search" :text="$t('text')" info="99+" />
</van-grid>
</demo-block>
@ -66,7 +66,7 @@ export default {
customContent: '自定义内容',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
showInfo: '显示徽标'
showInfo: '提示信息'
},
'en-US': {
text: 'Text',

2
src/grid/test/__snapshots__/demo.spec.js.snap
View File

@ -166,7 +166,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-grid van-hairline--top">
<div class="van-grid-item" style="flex-basis: 50%;">
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
<div class="van-info">5</div>
<div class="van-info van-info--dot"></div>
</i><span class="van-grid-item__text">文字</span></div>
</div>
<div class="van-grid-item" style="flex-basis: 50%;">