enhance: measureCSSLength supports vw unit

ant-design · Feb 26, 2022 · 73c8cb6 · 73c8cb6
1 parent d6bca1b
commit 73c8cb6
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 23 deletions.
diff --git a/src/components/picker-view/index.en.md b/src/components/picker-view/index.en.md
@@ -21,11 +21,11 @@ For the type definition of `PickerColumnItem` `PickerColumn` `PickerValue` `Pick
 
 ### CSS Variables
 
-| Name             | Description                | Default |
-| ---------------- | -------------------------- | ------- |
-| --height         | Height of PickerView.      | `240px` |
-| --item-height    | Height of option item.     | `34px`  |
-| --item-font-size | Font size of option items. | `16px`  |
+| Name             | Description                                               | Default |
+| ---------------- | --------------------------------------------------------- | ------- |
+| --height         | Height of PickerView.                                     | `240px` |
+| --item-height    | Height of option item. Only supports px rem and vw units. | `34px`  |
+| --item-font-size | Font size of option items.                                | `16px`  |
 
 ## CascadePickerView
 

diff --git a/src/components/picker-view/index.zh.md b/src/components/picker-view/index.zh.md
@@ -21,11 +21,11 @@ PickerView 是 [Picker](./picker/#picker) 的内容区域。
 
 ### CSS 变量
 
-| 属性             | 说明       | 默认值  |
-| ---------------- | ---------- | ------- |
-| --height         | 整体的高度 | `240px` |
-| --item-height    | 选项的高度 | `34px`  |
-| --item-font-size | 选项的字号 | `16px`  |
+| 属性             | 说明                                 | 默认值  |
+| ---------------- | ------------------------------------ | ------- |
+| --height         | 整体的高度                           | `240px` |
+| --item-height    | 选项的高度，仅支持 px rem 和 vw 单位 | `34px`  |
+| --item-font-size | 选项的字号                           | `16px`  |
 
 ## CascadePickerView
 

diff --git a/src/components/picker/index.en.md b/src/components/picker/index.en.md
@@ -45,12 +45,12 @@ In addition, the following attributes of [Popup](./popup) are supported: `getCon
 
 ### CSS Variables
 
-| Name                      | Description                             | Default | Global |
-| ------------------------- | --------------------------------------- | ------- | ------ |
-| --header-button-font-size | Font size of confirm and cancel button. | `15px`  | -      |
-| --title-font-size         | Font size of title.                     | `15px`  | -      |
-| --item-font-size          | Font size of option items.              | `16px`  | -      |
-| --item-height             | Height of option item.                  | `34px`  | -      |
+| Name                      | Description                                               | Default | Global |
+| ------------------------- | --------------------------------------------------------- | ------- | ------ |
+| --header-button-font-size | Font size of confirm and cancel button.                   | `15px`  | -      |
+| --title-font-size         | Font size of title.                                       | `15px`  | -      |
+| --item-font-size          | Font size of option items.                                | `16px`  | -      |
+| --item-height             | Height of option item. Only supports px rem and vw units. | `34px`  | -      |
 
 ## CascadePicker
 

diff --git a/src/components/picker/index.zh.md b/src/components/picker/index.zh.md
@@ -45,12 +45,12 @@ type PickerValueExtend = {
 
 ### CSS 变量
 
-| 属性                      | 说明                 | 默认值 | 全局变量 |
-| ------------------------- | -------------------- | ------ | -------- |
-| --header-button-font-size | 确定和取消按钮的字号 | `15px` | -        |
-| --title-font-size         | 标题的字号           | `15px` | -        |
-| --item-font-size          | 选择项的字号         | `16px` | -        |
-| --item-height             | 选项的高度           | `34px` | -        |
+| 属性                      | 说明                                 | 默认值 | 全局变量 |
+| ------------------------- | ------------------------------------ | ------ | -------- |
+| --header-button-font-size | 确定和取消按钮的字号                 | `15px` | -        |
+| --title-font-size         | 标题的字号                           | `15px` | -        |
+| --item-font-size          | 选择项的字号                         | `16px` | -        |
+| --item-height             | 选项的高度，仅支持 px rem 和 vw 单位 | `34px` | -        |
 
 ## CascadePicker
 

diff --git a/src/utils/measure-css-length.ts b/src/utils/measure-css-length.ts
@@ -10,11 +10,13 @@ export function measureCSSLength(raw: string): number {
       parseFloat(withUnit) *
       parseFloat(window.getComputedStyle(document.documentElement).fontSize)
     )
+  } else if (withUnit.endsWith('vw')) {
+    return (parseFloat(withUnit) * window.innerWidth) / 100
   } else {
     if (isDev) {
       devError(
         'Global',
-        'You are using a not supported CSS unit. Only `px` and `rem` are supported.'
+        'You are using a not supported CSS unit. Only `px` `rem` and `vw` are supported.'
       )
     }
     return 0