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(Grid): add info prop (#4424)

Browse Source
This commit is contained in:
neverland 2019-09-11 11:48:24 +08:00 committed by GitHub
parent eb32c6b02e
commit e69e3d349a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 79 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,7 +82,7 @@ Use `info` prop to show badge in icon
| text | Button text | *string* | - | - |
| icon | Icon | *string* | - | - |
| icon-class | Icon class name | *any* | `''` | - |
| info | Info message | *string \| number* | - | - |
| info | Content of badge in the upper right corner of icon | *string \| number* | - | - |
| 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` | - |

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

@ -84,7 +84,7 @@ export default {
| text | 按钮文字 | *string* | - | - |
| icon | 图标 | *string* | - | - |
| icon-class | 图标额外类名 | *any* | - | - |
| info | 图标右上角提示信息 | *string \| number* | - | - |
| info | 图标右上角徽标提示的内容 | *string \| number* | - | - |
| url | 点击后跳转的链接地址 | *string* | - | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |
| replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - |

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

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

32
src/grid/README.md
View File

@ -15,12 +15,10 @@ Vue.use(Grid).use(GridItem);
```html
<van-grid>
<van-grid-item
v-for="value in 4"
:key="value"
icon="photo-o"
text="Text"
/>
<van-grid-item icon="photo-o" text="Text" />
<van-grid-item icon="photo-o" text="Text" />
<van-grid-item icon="photo-o" text="Text" />
<van-grid-item icon="photo-o" text="Text" />
</van-grid>
```
@ -83,16 +81,17 @@ Vue.use(Grid).use(GridItem);
```html
<van-grid clickable :column-num="2">
<van-grid-item
icon="home-o"
text="Vue Router"
to="/"
/>
<van-grid-item
icon="search"
text="URL"
url="https://www.baidu.com"
/>
<van-grid-item icon="home-o" text="Vue Router" to="/" />
<van-grid-item icon="search" text="URL" url="/vant/mobile.html" />
</van-grid>
```
### Show Info
```html
<van-grid :column-num="2">
<van-grid-item icon="home-o" text="Text" info="5" />
<van-grid-item icon="search" text="Text" info="99+" />
</van-grid>
```
@ -115,6 +114,7 @@ Vue.use(Grid).use(GridItem);
|------|------|------|------|------|
| text | Text | *string* | - | - |
| icon | Icon name or URL | *string* | - | - |
| info | Content of badge in the upper right corner of icon | *string \| number* | `''` | 2.2.1 |
| 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` | - |

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

@ -21,12 +21,10 @@ Vue.use(Grid).use(GridItem);
```html
<van-grid>
<van-grid-item
v-for="value in 4"
:key="value"
icon="photo-o"
text="文字"
/>
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
</van-grid>
```
@ -99,16 +97,19 @@ Vue.use(Grid).use(GridItem);
```html
<van-grid clickable :column-num="2">
<van-grid-item
icon="home-o"
text="路由跳转"
to="/"
/>
<van-grid-item
icon="search"
text="URL 跳转"
url="https://www.baidu.com"
/>
<van-grid-item icon="home-o" text="路由跳转" to="/" />
<van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
</van-grid>
```
### 显示徽标
设置`info`属性后，会在图标的右上角显示红色的徽标
```html
<van-grid :column-num="2">
<van-grid-item icon="home-o" text="文字" info="5" />
<van-grid-item icon="search" text="文字" info="99+" />
</van-grid>
```
@ -131,6 +132,7 @@ Vue.use(Grid).use(GridItem);
|------|------|------|------|------|
| text | 文字 | *string* | - | - |
| icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon) | *string* | - | - |
| info | 图标右上角徽标提示的内容 | *string \| number* | - | 2.2.1 |
| url | 点击后跳转的链接地址 | *string* | - | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |
| replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - |

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

@ -2,89 +2,53 @@
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-grid>
<van-grid-item
v-for="i in 4"
:key="i"
icon="photo-o"
:text="$t('text')"
/>
<van-grid-item v-for="i in 4" :key="i" icon="photo-o" :text="$t('text')" />
</van-grid>
</demo-block>
<demo-block :title="$t('columnNum')">
<van-grid :column-num="3">
<van-grid-item
v-for="i in 6"
:key="i"
icon="photo-o"
:text="$t('text')"
/>
<van-grid-item v-for="i in 6" :key="i" icon="photo-o" :text="$t('text')" />
</van-grid>
</demo-block>
<demo-block :title="$t('customContent')">
<van-grid
:border="false"
:column-num="3"
>
<van-grid :border="false" :column-num="3">
<van-grid-item>
<van-image
fit="contain"
src="https://img.yzcdn.cn/vant/apple-1.jpg"
/>
<van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
</van-grid-item>
<van-grid-item>
<van-image
fit="contain"
src="https://img.yzcdn.cn/vant/apple-2.jpg"
/>
<van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
</van-grid-item>
<van-grid-item>
<van-image
fit="contain"
src="https://img.yzcdn.cn/vant/apple-3.jpg"
/>
<van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-grid-item>
</van-grid>
</demo-block>
<demo-block :title="$t('square')">
<van-grid square>
<van-grid-item
v-for="i in 8"
:key="i"
icon="photo-o"
:text="$t('text')"
/>
<van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="$t('text')" />
</van-grid>
</demo-block>
<demo-block :title="$t('gutter')">
<van-grid :gutter="10">
<van-grid-item
v-for="i in 8"
:key="i"
icon="photo-o"
:text="$t('text')"
/>
<van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="$t('text')" />
</van-grid>
</demo-block>
<demo-block :title="$t('route')">
<van-grid
clickable
:column-num="2"
>
<van-grid-item
icon="home-o"
:text="$t('vueRoute')"
to="/"
/>
<van-grid-item
icon="search"
:text="$t('urlRoute')"
url="https://www.baidu.com"
/>
<van-grid clickable :column-num="2">
<van-grid-item icon="home-o" :text="$t('vueRoute')" to="/" />
<van-grid-item icon="search" :text="$t('urlRoute')" url="/vant/mobile.html" />
</van-grid>
</demo-block>
<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="search" :text="$t('text')" info="99+" />
</van-grid>
</demo-block>
</demo-section>
@ -101,7 +65,8 @@ export default {
columnNum: '自定义列数',
customContent: '自定义内容',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转'
vueRoute: '路由跳转',
showInfo: '显示徽标'
},
'en-US': {
text: 'Text',
@ -111,7 +76,8 @@ export default {
columnNum: 'Column Num',
customContent: 'Custom Content',
urlRoute: 'URL',
vueRoute: 'Vue Router'
vueRoute: 'Vue Router',
showInfo: 'Show Info'
}
}
};
@ -119,5 +85,4 @@ export default {
<style lang="less">
@import '../../style/var';
</style>

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

@ -162,5 +162,19 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div>
<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>
</i><span class="van-grid-item__text">文字</span></div>
</div>
<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-search van-grid-item__icon">
<div class="van-info">99+</div>
</i><span class="van-grid-item__text">文字</span></div>
</div>
</div>
</div>
</div>
`;

2
src/icon/README.md
View File

@ -63,7 +63,7 @@ import 'vant/lib/icon/local.css';
| Attribute | Description | Type | Default | Version |
|------|------|------|------|------|
| name | Icon name or URL | *string* | `''` | - |
| info | Info message | *string \| number* | `''` | - |
| info | Content of badge in the upper right corner of icon | *string \| number* | `''` | - |
| color | Icon color | *string* | `inherit` | - |
| size | Icon size | *string \| number* | `inherit` | - |
| class-prefix | ClassName prefix | *string* | `van-icon` | - |

2
src/icon/README.zh-CN.md
View File

@ -73,7 +73,7 @@ import 'vant/lib/icon/local.css';
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 图标名称或图片链接 | *string* | - | - |
| info | 图标右上角文字提示 | *string \| number* | - | - |
| info | 图标右上角徽标提示的内容 | *string \| number* | - | - |
| color | 图标颜色 | *string* | `inherit` | - |
| size | 图标大小，如 `20px` `2em`，默认单位为`px` | *string \| number* | `inherit` | - |
| class-prefix | 类名前缀 | *string* | `van-icon` | - |

2
src/tabbar/README.md
View File

@ -163,7 +163,7 @@ export default {
| name | Identifier | *string \| number* | Item index | - |
| icon | Icon name | *string* | - | - |
| dot | Whether to show red dot | *boolean* | - | - |
| info | Info message | *string \| number* | - | - |
| info | Content of badge in the upper right corner of icon | *string \| number* | - | - |
| 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` | - |

2
src/tabbar/README.zh-CN.md
View File

@ -169,7 +169,7 @@ export default {
| name | 标签名称，作为匹配的标识符 | *string \| number* | 当前标签的索引值 | - |
| icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon)| *string* | - | - |
| dot | 是否显示小红点 | *boolean* | - | - |
| info | 图标右上角提示信息 | *string \| number* | - | - |
| info | 图标右上角徽标提示的内容 | *string \| number* | - | - |
| url | 点击后跳转的链接地址 | *string* | - | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |
| replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - |