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

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: [
-        {
-          text: '杭州',
-          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
-        }
-      ]
+      customContent: '自定义内容',
+      data: zhCNData,
+      dataSimple: [{ text: '分组 1' }, { text: '分组 2' }]
     },
     'en-US': {
-      group1: 'All',
-      group2: 'Group1',
-      group3: 'Group2',
-      group4: 'Group3',
       radioMode: 'Radio Mode',
       multipleMode: 'Multiple Mode',
-      city1: [
-        {
-          text: 'Delaware',
-          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
-        }
-      ]
+      customContent: 'Custom Content',
+      data: enUSData,
+      dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }]
     }
   },
 
   data() {
     return {
       activeId: 1,
+      activeId2: 1,
       activeIds: [1, 2],
-      mainActiveIndex: 0,
-      mainActiveIndex2: 0
+      activeIndex: 0,
+      activeIndex2: 0,
+      activeIndex3: 0
     };
   },
 
   computed: {
     items() {
-      return [
-        {
-          text: this.$t('group1'),
-          children: [...this.$t('city1'), ...this.$t('city2')]
-        },
-        {
-          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')
-        }
-      ];
+      return this.$t('data');
+    },
+
+    simpleItems() {
+      return this.$t('dataSimple');
     }
   }
 };