diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md index 40e0af2b1..6ea832a49 100644 --- a/docs/markdown/v2-progress-tracking.md +++ b/docs/markdown/v2-progress-tracking.md @@ -61,6 +61,10 @@ - 新增`label-class`属性 +### Icon + +- 支持`Number`类型的`size`属性 + ### Popup - 新增`click`事件 diff --git a/packages/icon/en-US.md b/packages/icon/en-US.md index 8a04af738..6290d052e 100644 --- a/packages/icon/en-US.md +++ b/packages/icon/en-US.md @@ -60,7 +60,7 @@ import 'vant/lib/icon/local.css'; | name | Icon name or URL | `String` | `''` | | info | Info message | `String | Number` | `''` | | color | Icon color | `String` | `inherit` | -| size | Icon size | `String` | `inherit` | +| size | Icon size | `String | Number` | `inherit` | | class-prefix | ClassName prefix | `String` | `van-icon` | | tag | HTML Tag | `String` | `i` | diff --git a/packages/icon/index.tsx b/packages/icon/index.tsx index 67fe55de3..f9651ebf5 100644 --- a/packages/icon/index.tsx +++ b/packages/icon/index.tsx @@ -1,4 +1,4 @@ -import { use } from '../utils'; +import { use, suffixPx } from '../utils'; import { inherit } from '../utils/functional'; import Info from '../info'; import { isSrc } from '../utils/validate/src'; @@ -38,7 +38,7 @@ function Icon( ]} style={{ color: props.color, - fontSize: props.size + fontSize: suffixPx(props.size) }} {...inherit(ctx, true)} > diff --git a/packages/icon/test/__snapshots__/index.spec.js.snap b/packages/icon/test/__snapshots__/index.spec.js.snap index cdd94e7ea..69140e436 100644 --- a/packages/icon/test/__snapshots__/index.spec.js.snap +++ b/packages/icon/test/__snapshots__/index.spec.js.snap @@ -15,6 +15,11 @@ exports[`render icon with url name 1`] = ` `; +exports[`size without unit 1`] = ` + + +`; + exports[`tag prop 1`] = `
diff --git a/packages/icon/test/index.spec.js b/packages/icon/test/index.spec.js index 70e587753..b20dac9f8 100644 --- a/packages/icon/test/index.spec.js +++ b/packages/icon/test/index.spec.js @@ -36,3 +36,12 @@ test('tag prop', () => { }); expect(wrapper).toMatchSnapshot(); }); + +test('size without unit', () => { + const wrapper = mount(Icon, { + propsData: { + size: 20 + } + }); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/icon/zh-CN.md b/packages/icon/zh-CN.md index b6cb0845b..ee881d7be 100644 --- a/packages/icon/zh-CN.md +++ b/packages/icon/zh-CN.md @@ -63,7 +63,7 @@ import 'vant/lib/icon/local.css'; | name | 图标名称或图片链接 | `String` | - | - | | info | 图标右上角文字提示 | `String | Number` | - | - | | color | 图标颜色 | `String` | `inherit` | 1.1.3 | -| size | 图标大小,如 `20px` `2em` | `String` | `inherit` | 1.1.15 | +| size | 图标大小,如 `20px` `2em`,默认单位为`px` | `String | Number` | `inherit` | 2.0.0 | | class-prefix | 类名前缀 | `String` | `van-icon` | 1.2.1 | | tag | HTML 标签 | `String` | `i` | 1.6.10 | diff --git a/packages/loading/zh-CN.md b/packages/loading/zh-CN.md index b2e3a5775..46e843784 100644 --- a/packages/loading/zh-CN.md +++ b/packages/loading/zh-CN.md @@ -41,8 +41,8 @@ Vue.use(Loading); |------|------|------|------|------| | color | 颜色 | `String` | `#c9c9c9` | - | | type | 类型,可选值为 `spinner` | `String` | `circular` | - | -| size | 加载图标大小 | `String | Number` | `30px` | - | -| text-size | 文字大小 | `String | Number` | `14px` | 2.0.0 | +| size | 加载图标大小,默认单位为`px` | `String | Number` | `30px` | - | +| text-size | 文字大小,默认单位为`px` | `String | Number` | `14px` | 2.0.0 | | vertical | 是否垂直排列图标和文字内容 | `Boolean` | `false` | 2.0.0 | ### Slots diff --git a/packages/utils/index.ts b/packages/utils/index.ts index e6c061f61..59ad68599 100644 --- a/packages/utils/index.ts +++ b/packages/utils/index.ts @@ -50,7 +50,11 @@ export function isInDocument(element: HTMLElement): boolean { return document.body.contains(element); } -export function suffixPx(value: string | number): string { +export function suffixPx(value?: string | number): string | undefined { + if (!isDef(value)) { + return undefined; + } + value = String(value); return isNumber(value) ? `${value}px` : value; }