diff --git a/src/sticky/test/index.spec.js b/src/sticky/test/index.spec.js
index 7fb2de770..16c6b2c2f 100644
--- a/src/sticky/test/index.spec.js
+++ b/src/sticky/test/index.spec.js
@@ -63,6 +63,22 @@ test('offset-top with rem unit', () => {
window.getComputedStyle = originGetComputedStyle;
});
+test('offset-top with vw unit', () => {
+ window.innerWidth = 300;
+
+ const wrapper = mount({
+ template: `
+
+ Content
+
+ `,
+ });
+
+ mockScrollTop(100);
+ expect(wrapper).toMatchSnapshot();
+ mockScrollTop(0);
+});
+
test('should not trigger scroll event when hidden', () => {
const scroll = jest.fn();
mount({
diff --git a/src/tab/README.md b/src/tab/README.md
index 009dc2637..567c562ab 100644
--- a/src/tab/README.md
+++ b/src/tab/README.md
@@ -205,7 +205,7 @@ In scrollspy mode, the list of content will be tiled
| 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` ans `rem` unit, default `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | Sticky offset top , supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `4` | - |
| 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 757ea4aeb..1c62490e3 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -209,7 +209,7 @@ export default {
| swipeable | 是否开启手势滑动切换 | _boolean_ | `false` |
| lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
| scrollspy `v2.3.0` | 是否开启滚动导航 | _boolean_ | `false` |
-| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
| swipe-threshold | 滚动阈值，标签数量超过阈值时开始横向滚动 | _number \| string_ | `4` |
| title-active-color | 标题选中态颜色 | _string_ | - |
| title-inactive-color | 标题默认态颜色 | _string_ | - |
diff --git a/src/utils/format/unit.ts b/src/utils/format/unit.ts
index b50167e7c..9b2de011d 100644
--- a/src/utils/format/unit.ts
+++ b/src/utils/format/unit.ts
@@ -1,4 +1,4 @@
-import { isDef } from '..';
+import { isDef, inBrowser } from '..';
import { isNumeric } from '../validate/number';
export function addUnit(value?: string | number): string | undefined {
@@ -30,13 +30,24 @@ function convertRem(value: string) {
return +value * getRootFontSize();
}
+function convertVw(value: string) {
+ value = value.replace(/vw/g, '');
+ return (+value * window.innerWidth) / 100;
+}
+
export function unitToPx(value: string | number): number {
if (typeof value === 'number') {
return value;
}
- if (value.indexOf('rem') !== -1) {
- return convertRem(value);
+ if (inBrowser) {
+ if (value.indexOf('rem') !== -1) {
+ return convertRem(value);
+ }
+
+ if (value.indexOf('vw') !== -1) {
+ return convertVw(value);
+ }
}
return parseFloat(value);