From 668a7fbf5f687b10a71593375fef07396fc0d706 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 13 Dec 2020 14:02:16 +0800
Subject: [PATCH] docs(TreeSelect): use composition api

---
 src/tree-select/README.md       | 84 ++++++++++++++++++++++++++-------
 src/tree-select/README.zh-CN.md | 84 ++++++++++++++++++++++++++-------
 src/tree-select/demo/index.vue  | 73 ++++++++++++++--------------
 3 files changed, 172 insertions(+), 69 deletions(-)

diff --git a/src/tree-select/README.md b/src/tree-select/README.md
index 861e2bc87..3b9e3ca22 100644
--- a/src/tree-select/README.md
+++ b/src/tree-select/README.md
@@ -16,19 +16,41 @@ app.use(TreeSelect);
 
 ```html
 <van-tree-select
-  v-model:active-id="activeId"
-  v-model:main-active-index="activeIndex"
+  v-model:active-id="state.activeId"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
-      items,
+  setup() {
+    const state = reactive({
       activeId: 1,
       activeIndex: 0,
+    });
+    const items = [
+      {
+        text: 'Group 1',
+        children: [
+          { text: 'Delaware', id: 1 },
+          { text: 'Florida', id: 2 },
+        ],
+      },
+      {
+        text: 'Group 2',
+        children: [
+          { text: 'Alabama', id: 5 },
+          { text: 'Kansas', id: 6 },
+        ],
+      },
+    ];
+
+    return {
+      state,
+      items,
     };
   },
 };
@@ -38,19 +60,41 @@ export default {
 
 ```html
 <van-tree-select
-  v-model:active-id="activeIds"
-  v-model:main-active-index="activeIndex"
+  v-model:active-id="state.activeIds"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
-      items,
-      activeIds: [1, 2],
+  setup() {
+    const state = reactive({
+      activeId: [1, 2],
       activeIndex: 0,
+    });
+    const items = [
+      {
+        text: 'Group 1',
+        children: [
+          { text: 'Delaware', id: 1 },
+          { text: 'Florida', id: 2 },
+        ],
+      },
+      {
+        text: 'Group 2',
+        children: [
+          { text: 'Alabama', id: 5 },
+          { text: 'Kansas', id: 6 },
+        ],
+      },
+    ];
+
+    return {
+      state,
+      items,
     };
   },
 };
@@ -60,17 +104,17 @@ export default {
 
 ```html
 <van-tree-select
-  v-model:main-active-index="active"
+  v-model:main-active-index="activeIndex"
   height="55vw"
   :items="items"
 >
   <template #content>
     <van-image
-      v-if="active === 0"
+      v-if="activeIndex === 0"
       src="https://img.yzcdn.cn/vant/apple-1.jpg"
     />
     <van-image
-      v-if="active === 1"
+      v-if="activeIndex === 1"
       src="https://img.yzcdn.cn/vant/apple-2.jpg"
     />
   </template>
@@ -78,10 +122,13 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const activeIndex = ref(0);
     return {
-      active: 0,
+      activeIndex,
       items: [{ text: 'Group 1' }, { text: 'Group 2' }],
     };
   },
@@ -99,10 +146,13 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
+    const activeIndex = ref(0);
     return {
-      activeIndex: 0,
+      activeIndex,
       items: [
         { text: 'Group 1', children: [], dot: true },
         { text: 'Group 2', children: [], badge: 5 },
diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md
index 3fe1d5598..cc9dd07f3 100644
--- a/src/tree-select/README.zh-CN.md
+++ b/src/tree-select/README.zh-CN.md
@@ -18,19 +18,41 @@ app.use(TreeSelect);
 
 ```html
 <van-tree-select
-  v-model:active-id="activeId"
-  v-model:main-active-index="activeIndex"
+  v-model:active-id="state.activeId"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
-      items,
+  setup() {
+    const state = reactive({
       activeId: 1,
       activeIndex: 0,
+    });
+    const items = [
+      {
+        text: '浙江',
+        children: [
+          { text: '杭州', id: 1 },
+          { text: '温州', id: 2 },
+        ],
+      },
+      {
+        text: '江苏',
+        children: [
+          { text: '南京', id: 5 },
+          { text: '无锡', id: 6 },
+        ],
+      },
+    ];
+
+    return {
+      state,
+      items,
     };
   },
 };
@@ -42,19 +64,41 @@ export default {
 
 ```html
 <van-tree-select
-  v-model:active-id="activeIds"
-  v-model:main-active-index="activeIndex"
+  v-model:active-id="state.activeIds"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
-    return {
-      items,
-      activeIds: [1, 2],
+  setup() {
+    const state = reactive({
+      activeId: [1, 2],
       activeIndex: 0,
+    });
+    const items = [
+      {
+        text: '浙江',
+        children: [
+          { text: '杭州', id: 1 },
+          { text: '温州', id: 2 },
+        ],
+      },
+      {
+        text: '江苏',
+        children: [
+          { text: '南京', id: 5 },
+          { text: '无锡', id: 6 },
+        ],
+      },
+    ];
+
+    return {
+      state,
+      items,
     };
   },
 };
@@ -66,17 +110,17 @@ export default {
 
 ```html
 <van-tree-select
-  v-model:main-active-index="active"
+  v-model:main-active-index="activeIndex"
   height="55vw"
   :items="items"
 >
   <template #content>
     <van-image
-      v-if="active === 0"
+      v-if="activeIndex === 0"
       src="https://img.yzcdn.cn/vant/apple-1.jpg"
     />
     <van-image
-      v-if="active === 1"
+      v-if="activeIndex === 1"
       src="https://img.yzcdn.cn/vant/apple-2.jpg"
     />
   </template>
@@ -84,10 +128,13 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const activeIndex = ref(0);
     return {
-      active: 0,
+      activeIndex,
       items: [{ text: '分组 1' }, { text: '分组 2' }],
     };
   },
@@ -107,10 +154,13 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
+    const activeIndex = ref(0);
     return {
-      activeIndex: 0,
+      activeIndex,
       items: [
         { text: '浙江', children: [], dot: true },
         { text: '江苏', children: [], badge: 5 },
diff --git a/src/tree-select/demo/index.vue b/src/tree-select/demo/index.vue
index df299cf70..52c82ebee 100644
--- a/src/tree-select/demo/index.vue
+++ b/src/tree-select/demo/index.vue
@@ -46,33 +46,36 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { computed, reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import { zhCNData } from './data-zh';
 import { enUSData } from './data-en';
 import { deepClone } from '../../utils/deep-clone';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      showBadge: '徽标提示',
-      radioMode: '单选模式',
-      multipleMode: '多选模式',
-      customContent: '自定义内容',
-      data: zhCNData,
-      dataSimple: [{ text: '分组 1' }, { text: '分组 2' }],
-    },
-    'en-US': {
-      showBadge: 'Show Badge',
-      radioMode: 'Radio Mode',
-      multipleMode: 'Multiple Mode',
-      customContent: 'Custom Content',
-      data: enUSData,
-      dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
-    },
+const i18n = {
+  'zh-CN': {
+    showBadge: '徽标提示',
+    radioMode: '单选模式',
+    multipleMode: '多选模式',
+    customContent: '自定义内容',
+    data: zhCNData,
+    dataSimple: [{ text: '分组 1' }, { text: '分组 2' }],
   },
+  'en-US': {
+    showBadge: 'Show Badge',
+    radioMode: 'Radio Mode',
+    multipleMode: 'Multiple Mode',
+    customContent: 'Custom Content',
+    data: enUSData,
+    dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
+  },
+};
 
-  data() {
-    return {
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       activeId: 1,
       activeId2: 1,
       activeIds: [1, 2],
@@ -80,26 +83,26 @@ export default {
       activeIndex2: 0,
       activeIndex3: 0,
       activeIndex4: 0,
-    };
-  },
+    });
 
-  computed: {
-    items() {
-      return this.t('data');
-    },
+    const items = computed(() => t('data'));
 
-    simpleItems() {
-      return this.t('dataSimple');
-    },
-
-    badgeItems() {
-      const data = deepClone(this.t('data')).slice(0, 2);
+    const simpleItems = computed(() => t('dataSimple'));
 
+    const badgeItems = computed(() => {
+      const data = deepClone(t('data')).slice(0, 2);
       data[0].dot = true;
       data[1].badge = 5;
-
       return data;
-    },
+    });
+
+    return {
+      ...toRefs(state),
+      t,
+      items,
+      badgeItems,
+      simpleItems,
+    };
   },
 };
 </script>