docs(TreeSelect): use composition api

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>