feat(Picker): item-height support rem unit (#6462)

src/utils/format/unit.ts

@@ -9,3 +9,24 @@ export function addUnit(value?: string | number): string | undefined {
   value = String(value);
   return isNumeric(value) ? `${value}px` : value;
 }
+
+function convertRem(value: string) {
+  const rootStyle = window.getComputedStyle(document.documentElement);
+  const rootFontSize = parseFloat(rootStyle.fontSize);
+
+  value = value.replace(/rem/g, '');
+
+  return +value * rootFontSize;
+}
+
+export function unitToPx(value: string | number): number {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  if (value.indexOf('rem') !== -1) {
+    return convertRem(value);
+  }
+
+  return parseFloat(value);
+}

src/utils/test/index.spec.js

@@ -9,6 +9,7 @@ import { isNumeric } from '../validate/number';
 import { isAndroid } from '../validate/system';
 import { camelize } from '../format/string';
 import { formatNumber } from '../format/number';
+import { addUnit, unitToPx } from '../format/unit';
 
 test('deepClone', () => {
   const a = { foo: 0 };
@@ -115,3 +116,27 @@ test('formatNumber', () => {
   expect(formatNumber('-1.2-', true)).toEqual('-1.2');
   expect(formatNumber('123-')).toEqual('123');
 });
+
+test('addUnit', () => {
+  expect(addUnit(0)).toEqual('0px');
+  expect(addUnit(10)).toEqual('10px');
+  expect(addUnit('1%')).toEqual('1%');
+  expect(addUnit('1px')).toEqual('1px');
+  expect(addUnit('1vw')).toEqual('1vw');
+  expect(addUnit('1vh')).toEqual('1vh');
+  expect(addUnit('1rem')).toEqual('1rem');
+});
+
+test('unitToPx', () => {
+  const originGetComputedStyle = window.getComputedStyle;
+
+  window.getComputedStyle = () => ({ fontSize: '16px' });
+
+  expect(unitToPx(0)).toEqual(0);
+  expect(unitToPx(10)).toEqual(10);
+  expect(unitToPx('10px')).toEqual(10);
+  expect(unitToPx('0rem')).toEqual(0);
+  expect(unitToPx('10rem')).toEqual(160);
+
+  window.getComputedStyle = originGetComputedStyle;
+});