[Improvement] support Number type info (#845)

This commit is contained in:
neverland 2018-04-10 17:35:10 +08:00 committed by GitHub
parent d3f6042650
commit 64898e1900
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 26 additions and 15 deletions

View File

@ -47,5 +47,5 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | Content | `String` | `''` | - | | title | Content | `String` | `''` | - |
| info | Info Message | `String` | `''` | - | | info | Info Message | `String | Number` | `''` | - |
| url | Link | `String` | - | - | | url | Link | `String` | - | - |

View File

@ -61,7 +61,7 @@ Use `info` prop to show messages in upper right corner of icon
| text | Button text | `String` | - | - | | text | Button text | `String` | - | - |
| icon | Icon | `String` | - | - | | icon | Icon | `String` | - | - |
| icon-class | Icon class name | `String` | `''` | - | | icon-class | Icon class name | `String` | `''` | - |
| info | Info message | `String` | - | - | | info | Info message | `String | Number` | - | - |
| 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 | `String` | `false` | - | | replace | If true, the navigation will not leave a history record | `String` | `false` | - |

View File

@ -49,7 +49,7 @@ import 'vant/lib/vant-css/icon-local.css';
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| name | Icon name | `String` | `''` | - | | name | Icon name | `String` | `''` | - |
| info | Info message | `String` | `''` | - | | info | Info message | `String | Number` | `''` | - |
### Event ### Event

View File

@ -78,7 +78,7 @@ export default {
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| icon | Icon name | `String` | - | Names from Icon Component | | icon | Icon name | `String` | - | Names from Icon Component |
| dot | Whether to show red dot | `Boolean` | - | - | | dot | Whether to show red dot | `Boolean` | - | - |
| info | Info message | `String` | - | - | | info | Info message | `String | Number` | - | - |
| 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 | `String` | `false` | - | | replace | If true, the navigation will not leave a history record | `String` | `false` | - |

View File

@ -48,5 +48,5 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | 内容 | `String` | `''` | - | | title | 内容 | `String` | `''` | - |
| info | 提示消息 | `String` | `''` | - | | info | 提示消息 | `String | Number` | `''` | - |
| url | 跳转链接 | `String` | - | - | | url | 跳转链接 | `String` | - | - |

View File

@ -61,7 +61,7 @@ export default {
| text | 按钮文字 | `String` | - | - | | text | 按钮文字 | `String` | - | - |
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 | | icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
| icon-class | 图标额外类名 | `String` | `''` | - | | icon-class | 图标额外类名 | `String` | `''` | - |
| info | 图标右上角提示信息 | `String` | - | - | | info | 图标右上角提示信息 | `String | Number` | - | - |
| url | 跳转链接 | `String` | - | - | | url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象,同 `vue-router` 的 to | `String | Object` | - | - | | to | 路由跳转对象,同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - | | replace | 跳转时是否替换当前 history | `String` | `false` | - |

View File

@ -50,7 +50,7 @@ import 'vant/lib/vant-css/icon-local.css';
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| name | 图标名称 | `String` | `''` | - | | name | 图标名称 | `String` | `''` | - |
| info | 图标右上角文字提示 | `String` | `''` | - | | info | 图标右上角文字提示 | `String | Number` | `''` | - |
### Event ### Event

View File

@ -82,7 +82,7 @@ export default {
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| icon | 图标名称 | `String` | - | Icon 组件中可用的类型 | | icon | 图标名称 | `String` | - | Icon 组件中可用的类型 |
| dot | 是否显示小红点 | `Boolean` | - | - | | dot | 是否显示小红点 | `Boolean` | - | - |
| info | 图标右上角提示信息 | `String` | - | - | | info | 图标右上角提示信息 | `String | Number` | - | - |
| url | 跳转链接 | `String` | - | - | | url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象,同 `vue-router` 的 to | `String | Object` | - | - | | to | 路由跳转对象,同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - | | replace | 跳转时是否替换当前 history | `String` | `false` | - |

View File

@ -1,19 +1,20 @@
<template> <template>
<a class="van-badge van-hairline" :class="{ 'van-badge--select': isSelect }" :href="url" @click="onClick"> <a class="van-badge van-hairline" :class="{ 'van-badge--select': isSelect }" :href="url" @click="onClick">
<div v-if="info" class="van-badge__info">{{ info }}</div> <div v-if="isDef(info)" class="van-badge__info">{{ info }}</div>
{{ title }} {{ title }}
</a> </a>
</template> </template>
<script> <script>
import create from '../utils/create'; import create from '../utils/create';
import { isDef } from '../utils';
export default create({ export default create({
name: 'badge', name: 'badge',
props: { props: {
url: String, url: String,
info: String, info: [String, Number],
title: String title: String
}, },
@ -28,6 +29,8 @@ export default create({
}, },
methods: { methods: {
isDef,
onClick() { onClick() {
this.$emit('click', this.$parent.badges.indexOf(this)); this.$emit('click', this.$parent.badges.indexOf(this));
} }

View File

@ -17,7 +17,7 @@ export default create({
props: { props: {
url: String, url: String,
text: String, text: String,
info: String, info: [String, Number],
icon: String, icon: String,
iconClass: String iconClass: String
}, },

View File

@ -1,11 +1,12 @@
<template> <template>
<i class="van-icon" :class="`van-icon-${name}`" v-on="$listeners"> <i class="van-icon" :class="`van-icon-${name}`" v-on="$listeners">
<slot /> <slot />
<div v-if="info" class="van-icon__info">{{ info }}</div> <div v-if="isDef(info)" class="van-icon__info">{{ info }}</div>
</i> </i>
</template> </template>
<script> <script>
import { isDef } from '../utils';
import create from '../utils/create-basic'; import create from '../utils/create-basic';
export default create({ export default create({
@ -13,7 +14,11 @@ export default create({
props: { props: {
name: String, name: String,
info: String info: [String, Number]
},
methods: {
isDef
} }
}); });
</script> </script>

View File

@ -4,7 +4,7 @@
<slot name="icon" :active="active"> <slot name="icon" :active="active">
<icon v-if="icon" :name="icon" /> <icon v-if="icon" :name="icon" />
</slot> </slot>
<div v-if="info" class="van-icon__info">{{ info }}</div> <div v-if="isDef(info)" class="van-icon__info">{{ info }}</div>
</div> </div>
<div class="van-tabbar-item__text"> <div class="van-tabbar-item__text">
<slot :active="active"/> <slot :active="active"/>
@ -13,6 +13,7 @@
</template> </template>
<script> <script>
import { isDef } from '../utils';
import create from '../utils/create'; import create from '../utils/create';
import RouterLink from '../mixins/router-link'; import RouterLink from '../mixins/router-link';
@ -24,7 +25,7 @@ export default create({
props: { props: {
icon: String, icon: String,
dot: Boolean, dot: Boolean,
info: String info: [String, Number]
}, },
data() { data() {
@ -42,6 +43,8 @@ export default create({
}, },
methods: { methods: {
isDef,
onClick(event) { onClick(event) {
this.$parent.onChange(this.$parent.items.indexOf(this)); this.$parent.onChange(this.$parent.items.indexOf(this));
this.$emit('click', event); this.$emit('click', event);