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(Icon): add dot prop (#4425)

Browse Source
This commit is contained in:
neverland 2019-09-11 14:43:54 +08:00 committed by GitHub
parent e69e3d349a
commit 21d5127fd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 70 additions and 26 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 | Content of badge in the upper right corner of icon | *string \| number* | - | - |
| info | Content of the badge | *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` | - |

2
src/grid/README.md
View File

@ -114,7 +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 |
| 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* | - | - |
| replace | If true, the navigation will not leave a history record | *boolean* | `false` | - |

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

@ -132,7 +132,7 @@ Vue.use(Grid).use(GridItem);
|------|------|------|------|------|
| text | 文字 | *string* | - | - |
| icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon) | *string* | - | - |
| info | 图标右上角徽标提示的内容 | *string \| number* | - | 2.2.1 |
| info | 图标右上角徽标的内容 | *string \| number* | - | 2.2.1 |
| url | 点击后跳转的链接地址 | *string* | - | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |
| replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - |

4
src/icon/README.md
View File

@ -23,6 +23,7 @@ Use `name` prop to set icon name or icon URL
### Show Info
```html
<van-icon name="chat" dot />
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />
```
@ -63,7 +64,8 @@ import 'vant/lib/icon/local.css';
| Attribute | Description | Type | Default | Version |
|------|------|------|------|------|
| name | Icon name or URL | *string* | `''` | - |
| info | Content of badge in the upper right corner of icon | *string \| number* | `''` | - |
| dot | Whether to show red dot | *boolean* | `false` | 2.2.1 |
| info | Content of the badge | *string \| number* | `''` | - |
| color | Icon color | *string* | `inherit` | - |
| size | Icon size | *string \| number* | `inherit` | - |
| class-prefix | ClassName prefix | *string* | `van-icon` | - |

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

@ -24,11 +24,12 @@ Vue.use(Icon);
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
```
### 显示徽标
### 提示信息
设置`info`属性后，会在图标的右上角显示红色的徽标
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
```html
<van-icon name="chat" dot />
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />
```
@ -73,7 +74,8 @@ import 'vant/lib/icon/local.css';
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 图标名称或图片链接 | *string* | - | - |
| info | 图标右上角徽标提示的内容 | *string \| number* | - | - |
| dot | 是否显示图标右上角小红点 | *boolean* | `false` | 2.2.1 |
| info | 图标右上角徽标的内容 | *string \| number* | - | - |
| color | 图标颜色 | *string* | `inherit` | - |
| size | 图标大小，如 `20px` `2em`，默认单位为`px` | *string \| number* | `inherit` | - |
| class-prefix | 类名前缀 | *string* | `van-icon` | - |

20
src/icon/demo/index.vue
View File

@ -1,19 +1,21 @@
<template>
<demo-section>
<van-tabs v-model="tab" sticky :color="BLUE">
<van-tab title="基础图标">
<van-tab :title="$t('basic')">
<van-col v-for="icon in icons.basic" :key="icon" span="6" @click="copy(icon)">
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</van-tab>
<van-tab title="线框风格">
<van-tab :title="$t('outline')">
<van-col v-for="icon in icons.outline" :key="icon" span="6" @click="copy(icon)">
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</van-tab>
<van-tab title="实底风格">
<van-tab :title="$t('filled')">
<van-col v-for="icon in icons.filled" :key="icon" span="6" @click="copy(icon)">
<van-icon :name="icon" />
<span>{{ icon }}</span>
@ -55,15 +57,19 @@ export default {
i18n: {
'zh-CN': {
title: '图标列表',
info: '显示徽标',
info: '提示信息',
basic: '基础图标',
copied: '复制成功'
copied: '复制成功',
outline: '线框风格',
filled: '实底风格'
},
'en-US': {
title: 'Icon List',
info: 'Show Info',
basic: 'Basic Icon',
copied: 'Copied'
basic: 'Basic',
copied: 'Copied',
outline: 'Outline',
filled: 'Filled'
}
},

4
src/icon/index.tsx
View File

@ -8,6 +8,7 @@ import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/types';
export type IconProps = {
dot?: boolean;
tag: keyof HTMLElementTagNameMap | string;
name: string;
size?: string | number;
@ -47,12 +48,13 @@ function Icon(
{imageIcon && (
<Image class={bem('image')} fit="contain" src={props.name} showLoading={false} />
)}
<Info info={props.info} />
<Info dot={props.dot} info={props.info} />
</props.tag>
);
}
Icon.props = {
dot: Boolean,
name: String,
size: [Number, String],
info: [Number, String],

6
src/icon/test/__snapshots__/index.spec.js.snap
View File

@ -1,5 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`dot prop 1`] = `
<i class="van-icon van-icon-undefined">
<div class="van-info van-info--dot"></div>
</i>
`;
exports[`render icon default slot 1`] = `
<i class="van-icon van-icon-success">Default slot
<!----></i>

9
src/icon/test/index.spec.js
View File

@ -46,6 +46,15 @@ test('tag prop', () => {
expect(wrapper).toMatchSnapshot();
});
test('dot prop', () => {
const wrapper = mount(Icon, {
propsData: {
dot: true
}
});
expect(wrapper).toMatchSnapshot();
});
test('size without unit', () => {
const wrapper = mount(Icon, {
propsData: {

12
src/info/index.less
View File

@ -2,7 +2,7 @@
.van-info {
position: absolute;
top: -@info-size / 2;
top: 0;
right: 0;
box-sizing: border-box;
min-width: @info-size;
@ -16,6 +16,14 @@
background-color: @info-background-color;
border: @info-border-width solid @white;
border-radius: @info-size;
transform: translateX(50%);
transform: translate(50%, -50%);
transform-origin: 100%;
&--dot {
width: @info-dot-size;
min-width: 0;
height: @info-dot-size;
background-color: @info-dot-color;
border-radius: 100%;
}
}

11
src/info/index.tsx
View File

@ -6,6 +6,7 @@ import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/types';
export type InfoProps = {
dot?: boolean;
info?: string | number;
};
@ -17,18 +18,22 @@ function Info(
slots: DefaultSlots,
ctx: RenderContext<InfoProps>
) {
if (!isDef(props.info) || props.info === '') {
const { dot, info } = props;
const showInfo = isDef(info) && info !== '';
if (!dot && !showInfo) {
return;
}
return (
<div class={bem()} {...inherit(ctx, true)}>
{props.info}
<div class={bem({ dot })} {...inherit(ctx, true)}>
{dot ? '' : props.info}
</div>
);
}
Info.props = {
dot: Boolean,
info: [Number, String]
};

2
src/style/var.less
View File

@ -318,6 +318,8 @@
@info-font-weight: 500;
@info-border-width: 1px;
@info-background-color: @red;
@info-dot-color: @red;
@info-dot-size: 8px;
@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
// Image

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 | Content of badge in the upper right corner of icon | *string \| number* | - | - |
| info | Content of the badge | *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` | - |

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

@ -57,7 +57,9 @@ export default {
}
```
### 显示徽标
### 提示信息
设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
```html
<van-tabbar v-model="active">
@ -168,8 +170,8 @@ export default {
|------|------|------|------|------|
| name | 标签名称，作为匹配的标识符 | *string \| number* | 当前标签的索引值 | - |
| icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon)| *string* | - | - |
| dot | 是否显示小红点 | *boolean* | - | - |
| info | 图标右上角徽标提示的内容 | *string \| number* | - | - |
| dot | 是否显示图标右上角小红点 | *boolean* | `false` | - |
| info | 图标右上角徽标的内容 | *string \| number* | - | - |
| url | 点击后跳转的链接地址 | *string* | - | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |
| replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - |

2
src/tabbar/demo/index.vue
View File

@ -94,7 +94,7 @@
export default {
i18n: {
'zh-CN': {
badge: '显示徽标',
badge: '提示信息',
customIcon: '自定义图标',
customColor: '自定义颜色',
matchByName: '通过名称匹配'