diff --git a/src/area/README.md b/src/area/README.md
index 2a063927f..b4db1c884 100644
--- a/src/area/README.md
+++ b/src/area/README.md
@@ -65,7 +65,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
| columns-placeholder | Placeholder of columns | _string[]_ | `[]` |
| loading | Whether to show loading prompt | _boolean_ | `false` |
| readonly `v2.10.5` | Whether to be readonly | _boolean_ | `false` |
-| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
| columns-num | Level of picker | _number \| string_ | `3` |
| visible-item-count | Count of visible columns | _number \| string_ | `6` |
| swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md
index b4719c003..8e1cfdec0 100644
--- a/src/area/README.zh-CN.md
+++ b/src/area/README.zh-CN.md
@@ -65,7 +65,7 @@ Vue.use(Area);
| columns-placeholder | 列占位提示文字 | _string[]_ | `[]` |
| loading | 是否显示加载状态 | _boolean_ | `false` |
| readonly `v2.10.5` | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` |
-| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` |
| columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` |
| visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
| swipe-duration | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md
index 0b2c4e23a..c42961fe5 100644
--- a/src/datetime-picker/README.md
+++ b/src/datetime-picker/README.md
@@ -260,7 +260,7 @@ export default {
| filter | Option filter | _(type, vals) => vals_ | - |
| formatter | Option text formatter | _(type, val) => val_ | - |
| columns-order `v2.9.2` | Array for ordering columns, where item can be set to
`year`, `month`, `day`, `hour` and `minute` | _string[]_ | - |
-| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
| visible-item-count | Count of visible columns | _number \| string_ | `6` |
| swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md
index d5c26fff7..dd0a3dfc6 100644
--- a/src/datetime-picker/README.zh-CN.md
+++ b/src/datetime-picker/README.zh-CN.md
@@ -269,7 +269,7 @@ export default {
| filter | 选项过滤函数 | _(type, vals) => vals_ | - |
| formatter | 选项格式化函数 | _(type, val) => val_ | - |
| columns-order `v2.9.2` | 自定义列排序数组, 子项可选值为
`year`、`month`、`day`、`hour`、`minute` | _string[]_ | - |
-| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` |
| visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
| swipe-duration | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
diff --git a/src/picker/README.md b/src/picker/README.md
index b8609568f..6976f409b 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -253,7 +253,7 @@ export default {
| show-toolbar | Whether to show toolbar | _boolean_ | `false` |
| allow-html | Whether to allow HTML in option text | _boolean_ | `true` |
| default-index | Default value index of single column picker | _number \| string_ | `0` |
-| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
| visible-item-count | Count of visible columns | _number \| string_ | `6` |
| swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md
index 0214fbc8e..d90758c68 100644
--- a/src/picker/README.zh-CN.md
+++ b/src/picker/README.zh-CN.md
@@ -276,7 +276,7 @@ export default {
| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` |
| allow-html | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
| default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` |
-| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` |
| visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
| swipe-duration | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` |
diff --git a/src/sticky/README.md b/src/sticky/README.md
index 17ce81ccd..4691e0abb 100644
--- a/src/sticky/README.md
+++ b/src/sticky/README.md
@@ -56,7 +56,7 @@ export default {
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
-| offset-top `v2.8.7` | Offset top, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | Offset top, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` |
| z-index | z-index when sticky | _number \| string_ | `99` |
| container | Container DOM | _Element_ | - |
diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md
index 79c9f4467..fe6db1108 100644
--- a/src/sticky/README.zh-CN.md
+++ b/src/sticky/README.zh-CN.md
@@ -66,7 +66,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
-| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
| z-index | 吸顶时的 z-index | _number \| string_ | `99` |
| container | 容器对应的 HTML 节点 | _Element_ | - |
diff --git a/src/tab/README.md b/src/tab/README.md
index 39ac034de..bcd38d88a 100644
--- a/src/tab/README.md
+++ b/src/tab/README.md
@@ -233,7 +233,7 @@ export default {
| swipeable | Whether to switch tabs with swipe gestrue in the content | _boolean_ | `false` |
| lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
| scrollspy `v2.3.0` | Whether to use scrollspy mode | _boolean_ | `false` |
-| offset-top `v2.8.7` | Sticky offset top , supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | Sticky offset top , supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` |
| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` | - |
| title-active-color | Title active color | _string_ | - |
| title-inactive-color | Title inactive color | _string_ | - |
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index 2c228653c..b33490f94 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -240,7 +240,7 @@ export default {
| swipeable | 是否开启手势滑动切换 | _boolean_ | `false` |
| lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
| scrollspy `v2.3.0` | 是否开启滚动导航 | _boolean_ | `false` |
-| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
| swipe-threshold | 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | _number \| string_ | `5` |
| title-active-color | 标题选中态颜色 | _string_ | - |
| title-inactive-color | 标题默认态颜色 | _string_ | - |
diff --git a/src/utils/format/unit.ts b/src/utils/format/unit.ts
index 9b2de011d..5234870a2 100644
--- a/src/utils/format/unit.ts
+++ b/src/utils/format/unit.ts
@@ -35,6 +35,11 @@ function convertVw(value: string) {
return (+value * window.innerWidth) / 100;
}
+function convertVh(value: string) {
+ value = value.replace(/vh/g, '');
+ return (+value * window.innerHeight) / 100;
+}
+
export function unitToPx(value: string | number): number {
if (typeof value === 'number') {
return value;
@@ -44,10 +49,12 @@ export function unitToPx(value: string | number): number {
if (value.indexOf('rem') !== -1) {
return convertRem(value);
}
-
if (value.indexOf('vw') !== -1) {
return convertVw(value);
}
+ if (value.indexOf('vh') !== -1) {
+ return convertVh(value);
+ }
}
return parseFloat(value);
diff --git a/src/utils/test/index.spec.js b/src/utils/test/index.spec.js
index 2dd16e4d4..eb263eaa2 100644
--- a/src/utils/test/index.spec.js
+++ b/src/utils/test/index.spec.js
@@ -131,6 +131,8 @@ test('addUnit', () => {
test('unitToPx', () => {
const originGetComputedStyle = window.getComputedStyle;
+ window.innerWidth = 100;
+ window.innerHeight = 200;
window.getComputedStyle = () => ({ fontSize: '16px' });
expect(unitToPx(0)).toEqual(0);
@@ -138,6 +140,8 @@ test('unitToPx', () => {
expect(unitToPx('10px')).toEqual(10);
expect(unitToPx('0rem')).toEqual(0);
expect(unitToPx('10rem')).toEqual(160);
+ expect(unitToPx('10vw')).toEqual(10);
+ expect(unitToPx('10vh')).toEqual(20);
window.getComputedStyle = originGetComputedStyle;
});