docs(TreeSelect): add custom content demo (#4272)

src/tree-select/README.md

@@ -17,7 +17,7 @@ Vue.use(TreeSelect);
 <van-tree-select
   :items="items"
   :active-id.sync="activeId"
-  :main-active-index.sync="mainActiveIndex"
+  :main-active-index.sync="activeIndex"
 />
 ```
 
@@ -27,7 +27,7 @@ export default {
     return {
       items,
       activeId: 1,
-      mainActiveIndex: 0
+      activeIndex: 0
     };
   }
 }
@@ -39,7 +39,7 @@ export default {
 <van-tree-select
   :items="items"
   :active-id.sync="activeIds"
-  :main-active-index.sync="mainActiveIndex"
+  :main-active-index.sync="activeIndex"
 />
 ```
 
@@ -49,12 +49,44 @@ export default {
     return {
       items,
       activeIds: [1, 2],
-      mainActiveIndex: 0
+      activeIndex: 0
     };
   }
 }
 ```
 
+### Custom Content
+
+```html
+<van-tree-select
+  height="55vw"
+  :items="items"
+  :main-active-index.sync="activeIndex"
+>
+  <template slot="content">
+    <van-image
+      v-if="activeIndex === 0"
+      src="https://img.yzcdn.cn/vant/apple-1.jpg"
+    />
+    <van-image
+      v-if="activeIndex === 1"
+      src="https://img.yzcdn.cn/vant/apple-2.jpg"
+    />
+  </template>
+</van-tree-select>
+```
+
+```js
+export default {
+  data() {
+    return {
+      activeIndex: 0,
+      items: [{ text: 'Group 1' }, { text: 'Group 2' }]
+    }
+  }
+}
+```
+
 ## API
 
 ### Props
@@ -89,7 +121,7 @@ In every tree object, `text` property defines `id` stands for the unique key whi
 [
   {
     // name of the parent node
-    text: 'All Cities',
+    text: 'Group 1',
     // leaves of this parent node
     children: [
       {

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

@@ -19,7 +19,7 @@ Vue.use(TreeSelect);
 <van-tree-select
   :items="items"
   :active-id.sync="activeId"
-  :main-active-index.sync="mainActiveIndex"
+  :main-active-index.sync="activeIndex"
 />
 ```
 
@@ -29,7 +29,7 @@ export default {
     return {
       items,
       activeId: 1,
-      mainActiveIndex: 0
+      activeIndex: 0
     };
   }
 }
@@ -43,7 +43,7 @@ export default {
 <van-tree-select
   :items="items"
   :active-id.sync="activeIds"
-  :main-active-index.sync="mainActiveIndex"
+  :main-active-index.sync="activeIndex"
 />
 ```
 
@@ -53,12 +53,46 @@ export default {
     return {
       items,
       activeIds: [1, 2],
-      mainActiveIndex: 0
+      activeIndex: 0
     };
   }
 }
 ```
 
+### 自定义内容
+
+通过`content`插槽可以自定义右侧区域的内容
+
+```html
+<van-tree-select
+  height="55vw"
+  :items="items"
+  :main-active-index.sync="activeIndex"
+>
+  <template slot="content">
+    <van-image
+      v-if="activeIndex === 0"
+      src="https://img.yzcdn.cn/vant/apple-1.jpg"
+    />
+    <van-image
+      v-if="activeIndex === 1"
+      src="https://img.yzcdn.cn/vant/apple-2.jpg"
+    />
+  </template>
+</van-tree-select>
+```
+
+```js
+export default {
+  data() {
+    return {
+      activeIndex: 0,
+      items: [{ text: '分组 1' }, { text: '分组 2' }]
+    }
+  }
+}
+```
+
 ## API
 
 ### Props

src/tree-select/demo/data.en-US.ts

@@ -0,0 +1,66 @@
+const group1 = [
+  {
+    text: 'Delaware',
+    id: 1
+  },
+  {
+    text: 'Florida',
+    id: 2
+  },
+  {
+    text: 'Georqia',
+    id: 3,
+    disabled: true
+  },
+  {
+    text: 'Indiana',
+    id: 4
+  }
+];
+
+const group2 = [
+  {
+    text: 'Alabama',
+    id: 5
+  },
+  {
+    text: 'Kansas',
+    id: 6
+  },
+  {
+    text: 'Louisiana',
+    id: 7
+  },
+  {
+    text: 'Texas',
+    id: 8
+  }
+];
+
+const group3 = [
+  {
+    text: 'Alabama',
+    id: 9
+  },
+  {
+    text: 'Kansas',
+    id: 10
+  }
+];
+
+
+export const enUSData = [
+  {
+    text: 'Group 1',
+    children: group1
+  },
+  {
+    text: 'Group 2',
+    children: group2
+  },
+  {
+    text: 'Group 3',
+    disabled: true,
+    children: group3
+  }
+];

src/tree-select/demo/data.zh-CN.ts

@@ -0,0 +1,65 @@
+const zhejiang = [
+  {
+    text: '杭州',
+    id: 1
+  },
+  {
+    text: '温州',
+    id: 2
+  },
+  {
+    text: '宁波',
+    id: 3,
+    disabled: true
+  },
+  {
+    text: '义乌',
+    id: 4
+  }
+];
+
+const jiangsu = [
+  {
+    text: '南京',
+    id: 5
+  },
+  {
+    text: '无锡',
+    id: 6
+  },
+  {
+    text: '徐州',
+    id: 7
+  },
+  {
+    text: '苏州',
+    id: 8
+  }
+];
+
+const fujian = [
+  {
+    text: '泉州',
+    id: 9
+  },
+  {
+    text: '厦门',
+    id: 10
+  }
+];
+
+export const zhCNData = [
+  {
+    text: '浙江',
+    children: zhejiang
+  },
+  {
+    text: '江苏',
+    children: jiangsu
+  },
+  {
+    text: '福建',
+    disabled: true,
+    children: fujian
+  }
+];

src/tree-select/demo/index.vue

@@ -4,7 +4,7 @@
       <van-tree-select
         :items="items"
         :active-id.sync="activeId"
-        :main-active-index.sync="mainActiveIndex"
+        :main-active-index.sync="activeIndex"
       />
     </demo-block>
 
@@ -12,157 +12,61 @@
       <van-tree-select
         :items="items"
         :active-id.sync="activeIds"
-        :main-active-index.sync="mainActiveIndex2"
+        :main-active-index.sync="activeIndex2"
       />
     </demo-block>
+
+    <demo-block :title="$t('customContent')">
+      <van-tree-select height="55vw" :items="simpleItems" :main-active-index.sync="activeIndex3">
+        <template slot="content">
+          <van-image v-if="activeIndex3 === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+          <van-image v-if="activeIndex3 === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+        </template>
+      </van-tree-select>
+    </demo-block>
   </demo-section>
 </template>
 
 <script>
+import { zhCNData } from './data.zh-CN';
+import { enUSData } from './data.en-US';
+
 export default {
   i18n: {
     'zh-CN': {
-      group1: '所有城市',
-      group2: '浙江',
-      group3: '江苏',
-      group4: '福建',
       radioMode: '单选模式',
       multipleMode: '多选模式',
-      city1: [
+      customContent: '自定义内容',
-        {
+      data: zhCNData,
-          text: '杭州',
+      dataSimple: [{ text: '分组 1' }, { text: '分组 2' }]
-          id: 1
-        },
-        {
-          text: '温州',
-          id: 2
-        },
-        {
-          text: '宁波',
-          id: 3,
-          disabled: true
-        },
-        {
-          text: '义乌',
-          id: 4
-        }
-      ],
-      city2: [
-        {
-          text: '南京',
-          id: 5
-        },
-        {
-          text: '无锡',
-          id: 6
-        },
-        {
-          text: '徐州',
-          id: 7
-        },
-        {
-          text: '苏州',
-          id: 8
-        }
-      ],
-      city3: [
-        {
-          text: '泉州',
-          id: 9
-        },
-        {
-          text: '厦门',
-          id: 10
-        }
-      ]
     },
     'en-US': {
-      group1: 'All',
-      group2: 'Group1',
-      group3: 'Group2',
-      group4: 'Group3',
       radioMode: 'Radio Mode',
       multipleMode: 'Multiple Mode',
-      city1: [
+      customContent: 'Custom Content',
-        {
+      data: enUSData,
-          text: 'Delaware',
+      dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }]
-          id: 1
-        },
-        {
-          text: 'Florida',
-          id: 2
-        },
-        {
-          text: 'Georqia',
-          id: 3,
-          disabled: true
-        },
-        {
-          text: 'Indiana',
-          id: 4
-        }
-      ],
-      city2: [
-        {
-          text: 'Alabama',
-          id: 5
-        },
-        {
-          text: 'Kansas',
-          id: 6
-        },
-        {
-          text: 'Louisiana',
-          id: 7
-        },
-        {
-          text: 'Texas',
-          id: 8
-        }
-      ],
-      city3: [
-        {
-          text: 'Alabama',
-          id: 9
-        },
-        {
-          text: 'Kansas',
-          id: 10
-        }
-      ]
     }
   },
 
   data() {
     return {
       activeId: 1,
+      activeId2: 1,
       activeIds: [1, 2],
-      mainActiveIndex: 0,
+      activeIndex: 0,
-      mainActiveIndex2: 0
+      activeIndex2: 0,
+      activeIndex3: 0
     };
   },
 
   computed: {
     items() {
-      return [
+      return this.$t('data');
-        {
+    },
-          text: this.$t('group1'),
+
-          children: [...this.$t('city1'), ...this.$t('city2')]
+    simpleItems() {
-        },
+      return this.$t('dataSimple');
-        {
-          text: this.$t('group2'),
-          children: this.$t('city1')
-        },
-        {
-          text: this.$t('group3'),
-          children: this.$t('city2')
-        },
-        {
-          text: this.$t('group4'),
-          disabled: true,
-          children: this.$t('city3')
-        }
-      ];
     }
   }
 };

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

@@ -5,8 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tree-select" style="height: 300px;">
       <div class="van-tree-select__nav">
-        <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">所有城市</div>
+        <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">浙江</div>
-        <div class="van-ellipsis van-tree-select__nav-item">浙江</div>
         <div class="van-ellipsis van-tree-select__nav-item">江苏</div>
         <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--disabled">福建</div>
       </div>
@@ -16,18 +15,13 @@ exports[`renders demo correctly 1`] = `
         <div class="van-ellipsis van-tree-select__item">温州</div>
         <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
         <div class="van-ellipsis van-tree-select__item">义乌</div>
-        <div class="van-ellipsis van-tree-select__item">南京</div>
-        <div class="van-ellipsis van-tree-select__item">无锡</div>
-        <div class="van-ellipsis van-tree-select__item">徐州</div>
-        <div class="van-ellipsis van-tree-select__item">苏州</div>
       </div>
     </div>
   </div>
   <div>
     <div class="van-tree-select" style="height: 300px;">
       <div class="van-tree-select__nav">
-        <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">所有城市</div>
+        <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">浙江</div>
-        <div class="van-ellipsis van-tree-select__nav-item">浙江</div>
         <div class="van-ellipsis van-tree-select__nav-item">江苏</div>
         <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--disabled">福建</div>
       </div>
@@ -38,10 +32,21 @@ exports[`renders demo correctly 1`] = `
             <!----></i></div>
         <div class="van-ellipsis van-tree-select__item van-tree-select__item--disabled">宁波</div>
         <div class="van-ellipsis van-tree-select__item">义乌</div>
-        <div class="van-ellipsis van-tree-select__item">南京</div>
+      </div>
-        <div class="van-ellipsis van-tree-select__item">无锡</div>
+    </div>
-        <div class="van-ellipsis van-tree-select__item">徐州</div>
+  </div>
-        <div class="van-ellipsis van-tree-select__item">苏州</div>
+  <div>
+    <div class="van-tree-select" style="height: 55vw;">
+      <div class="van-tree-select__nav">
+        <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">分组 1</div>
+        <div class="van-ellipsis van-tree-select__nav-item">分组 2</div>
+      </div>
+      <div class="van-tree-select__content">
+        <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+              <!----></i></div>
+        </div>
+        <!---->
       </div>
     </div>
   </div>