[new feature] TreeSelect: support string type of height prop (#4107)

src/tree-select/README.md

@@ -52,7 +52,7 @@ export default {
 | Attribute | Description | Type | Default |
 |------|------|------|------|
 | items | Required datasets for the component | `Item[]` | `[]` |
-| height | Height (px) | `number` | `300` |
+| height | Height | `string | number` | `300` |
 | main-Active-index | The index of selected parent node | `number` | `0` |
 | active-id | Id of selected item | `string | number` | `0` |
 

src/tree-select/README.zh-CN.md

@@ -52,7 +52,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | items | 分类显示所需的数据 | `Item[]` | `[]` | - |
-| height | 高度，单位为 px | `number` | `300` | - |
+| height | 高度，默认单位为 px | `string | number` | `300` | - |
 | main-active-index | 左侧导航高亮的索引 | `number` | `0` | - |
 | active-id | 右侧选择项，高亮的数据id | `string | number` | `0` | - |
 

src/tree-select/index.tsx

@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 
@@ -19,7 +19,7 @@ export type TreeSelectChildren = {
 };
 
 export type TreeSelectProps = {
-  height: number;
+  height: number | string;
   items: TreeSelectItem[];
   activeId: number | string;
   mainActiveIndex: number;
@@ -98,7 +98,7 @@ function TreeSelect(
   }
 
   return (
-    <div class={bem()} style={{ height: `${height}px` }} {...inherit(ctx)}>
+    <div class={bem()} style={{ height: addUnit(height) }} {...inherit(ctx)}>
       <div class={bem('nav')}>{Nav}</div>
       <div class={bem('content')}>{Content()}</div>
     </div>
@@ -111,7 +111,7 @@ TreeSelect.props = {
     default: () => []
   },
   height: {
-    type: Number,
+    type: [Number, String],
     default: 300
   },
   activeId: {

src/tree-select/test/__snapshots__/index.spec.js.snap

@@ -15,3 +15,10 @@ exports[`empty list 1`] = `
   <div class="van-tree-select__content"></div>
 </div>
 `;
+
+exports[`height prop 1`] = `
+<div class="van-tree-select" style="height: 100vh;">
+  <div class="van-tree-select__nav"></div>
+  <div class="van-tree-select__content"></div>
+</div>
+`;

src/tree-select/test/index.spec.js

@@ -141,3 +141,13 @@ test('content slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('height prop', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      height: '100vh'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});