docs(Collapse): use composition api

src/collapse/README.md

@@ -26,11 +26,12 @@ Use `v-model` to control the name of active panels.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const activeNames = ref(['1']);
-      activeNames: ['1'],
+    return { activeNames };
-    };
   },
 };
 ```
@@ -48,11 +49,12 @@ In accordion mode, only one panel can be expanded at the same time.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const activeName = ref('1');
-      activeName: '1',
+    return { activeName };
-    };
   },
 };
 ```
@@ -90,11 +92,12 @@ Use the `disabled` prop to disable CollaseItem.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const activeNames = ref(['1']);
-      activeNames: ['1'],
+    return { activeNames };
-    };
   },
 };
 ```

src/collapse/README.zh-CN.md

@@ -30,11 +30,12 @@ app.use(CollapseItem);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const activeNames = ref(['1']);
-      activeNames: ['1'],
+    return { activeNames };
-    };
   },
 };
 ```
@@ -52,11 +53,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const activeName = ref('1');
-      activeName: '1',
+    return { activeName };
-    };
   },
 };
 ```
@@ -92,11 +94,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
-    return {
+    const activeNames = ref(['1']);
-      activeNames: ['1'],
+    return { activeNames };
-    };
   },
 };
 ```

src/collapse/demo/index.vue

@@ -60,9 +60,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { reactive, toRefs } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     accordion: '手风琴',
     titleSlot: '自定义标题内容',
@@ -73,14 +75,21 @@ export default {
     titleSlot: 'Custom title',
     text: 'Content',
   },
-  },
+};
 
-  data() {
+export default {
-    return {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       active1: [0],
       active2: 0,
       active3: [],
       active4: [],
+    });
+
+    return {
+      ...toRefs(state),
+      t,
     };
   },
 };