docs(TreeSelect): use composition api

src/tree-select/README.md

@@ -16,19 +16,41 @@ app.use(TreeSelect);
 
 ```html
 <van-tree-select
-  v-model:active-id="activeId"
+  v-model:active-id="state.activeId"
-  v-model:main-active-index="activeIndex"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const state = reactive({
-      items,
       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:active-id="state.activeIds"
-  v-model:main-active-index="activeIndex"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const state = reactive({
-      items,
+      activeId: [1, 2],
-      activeIds: [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 },

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:active-id="state.activeId"
-  v-model:main-active-index="activeIndex"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const state = reactive({
-      items,
       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:active-id="state.activeIds"
-  v-model:main-active-index="activeIndex"
+  v-model:main-active-index="state.activeIndex"
   :items="items"
 />
 ```
 
 ```js
+import { reactive } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const state = reactive({
-      items,
+      activeId: [1, 2],
-      activeIds: [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 },

src/tree-select/demo/index.vue

@@ -46,13 +46,14 @@
   </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 {
+const i18n = {
-  i18n: {
   'zh-CN': {
     showBadge: '徽标提示',
     radioMode: '单选模式',
@@ -69,10 +70,12 @@ export default {
     data: enUSData,
     dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
   },
-  },
+};
 
-  data() {
+export default {
-    return {
+  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: {
+    const items = computed(() => t('data'));
-    items() {
-      return this.t('data');
-    },
 
-    simpleItems() {
+    const simpleItems = computed(() => t('dataSimple'));
-      return this.t('dataSimple');
-    },
-
-    badgeItems() {
-      const data = deepClone(this.t('data')).slice(0, 2);
 
+    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>