feat(Switch): support number type of size prop (#4913)

src/switch/README.md

@@ -103,7 +103,7 @@ export default {
 | v-model | Check status of Switch | *any* | `false` | - |
 | loading | Whether to show loading icon | *boolean* | `false` | - |
 | disabled | Whether to disable switch | *boolean* | `false` | - |
-| size | Size of switch | *string* | `30px` | - |
+| size | Size of switch | *string \| number* | `30px` | 2.2.11 |
 | active-color | Background color when active | *string* | `#1989fa` | - |
 | inactive-color | Background color when inactive | *string* | `#fff` | - |
 | active-value | Value when active | *any* | `true` | - |

src/switch/README.zh-CN.md

@@ -103,7 +103,7 @@ export default {
 | v-model | 开关选中状态 | *any* | `false` | - |
 | loading | 是否为加载状态 | *boolean* | `false` | - |
 | disabled | 是否为禁用状态 | *boolean* | `false` | - |
-| size | 开关尺寸 | *string* | `30px` | - |
+| size | 开关尺寸，默认单位为`px` | *string \| number* | `30px` | 2.2.11 |
 | active-color | 打开时的背景色 | *string* | `#1989fa` | - |
 | inactive-color | 关闭时的背景色 | *string* | `#fff` | - |
 | active-value | 打开时的值 | *any* | `true` | - |

src/switch/index.tsx

@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { BLUE, GRAY_DARK } from '../utils/constant';
 import { switchProps, SharedSwitchProps } from './shared';
 import { emit, inherit } from '../utils/functional';
@@ -34,7 +34,7 @@ function Switch(
   const checked = value === activeValue;
 
   const switchStyle = {
-    fontSize: size,
+    fontSize: addUnit(size),
     backgroundColor: checked ? activeColor : inactiveColor
   };
 

src/switch/test/__snapshots__/index.spec.js.snap

@@ -5,3 +5,9 @@ exports[`inactive-color prop 1`] = `
   <div class="van-switch__node"></div>
 </div>
 `;
+
+exports[`size prop 1`] = `
+<div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
+  <div class="van-switch__node"></div>
+</div>
+`;

src/switch/test/index.spec.js

@@ -72,3 +72,13 @@ test('inactive-color prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('size prop', () => {
+  const wrapper = mount(Switch, {
+    propsData: {
+      size: 20
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});