From 2843352adb5d3be1dfbbc180050e58fa16681bf7 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 13 Aug 2019 12:00:50 +0800
Subject: [PATCH] [new feature] TreeSelect: support string type of height prop
 (#4107)

---
 src/tree-select/README.md                             |  2 +-
 src/tree-select/README.zh-CN.md                       |  2 +-
 src/tree-select/index.tsx                             |  8 ++++----
 src/tree-select/test/__snapshots__/index.spec.js.snap |  7 +++++++
 src/tree-select/test/index.spec.js                    | 10 ++++++++++
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/tree-select/README.md b/src/tree-select/README.md
index 09c7a3f46..3c833a95d 100644
--- a/src/tree-select/README.md
+++ b/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` |
 
diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md
index 310a31e0b..7b7bfd020 100644
--- a/src/tree-select/README.zh-CN.md
+++ b/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` | - |
 
diff --git a/src/tree-select/index.tsx b/src/tree-select/index.tsx
index 8862b17be..918f8402b 100644
--- a/src/tree-select/index.tsx
+++ b/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: {
diff --git a/src/tree-select/test/__snapshots__/index.spec.js.snap b/src/tree-select/test/__snapshots__/index.spec.js.snap
index 3c718139e..b3807b603 100644
--- a/src/tree-select/test/__snapshots__/index.spec.js.snap
+++ b/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>
+`;
diff --git a/src/tree-select/test/index.spec.js b/src/tree-select/test/index.spec.js
index 7a469d782..d379300f5 100644
--- a/src/tree-select/test/index.spec.js
+++ b/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();
+});