refactor: demo using script setup (#9235)

src/collapse/demo/index.vue

@@ -1,6 +1,32 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    accordion: '手风琴',
+    titleSlot: '自定义标题内容',
+    text: '代码是写出来给人看的，附带能在机器上运行',
+  },
+  'en-US': {
+    accordion: 'Accordion',
+    titleSlot: 'Custom title',
+    text: 'Content',
+  },
+};
+
+const t = useTranslate(i18n);
+const state = reactive({
+  active1: [0],
+  active2: 0,
+  active3: [],
+  active4: [],
+});
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
-    <van-collapse v-model="active1">
+    <van-collapse v-model="state.active1">
       <van-collapse-item :title="t('title') + 1">
         {{ t('text') }}
       </van-collapse-item>
@@ -14,7 +40,7 @@
   </demo-block>
 
   <demo-block :title="t('accordion')">
-    <van-collapse v-model="active2" accordion>
+    <van-collapse v-model="state.active2" accordion>
       <van-collapse-item :title="t('title') + 1">
         {{ t('text') }}
       </van-collapse-item>
@@ -28,7 +54,7 @@
   </demo-block>
 
   <demo-block :title="t('disabled')">
-    <van-collapse v-model="active3">
+    <van-collapse v-model="state.active3">
       <van-collapse-item :title="t('title') + 1">
         {{ t('text') }}
       </van-collapse-item>
@@ -42,7 +68,7 @@
   </demo-block>
 
   <demo-block :title="t('titleSlot')">
-    <van-collapse v-model="active4">
+    <van-collapse v-model="state.active4">
       <van-collapse-item>
         <template #title>
           {{ t('title') + 1 }}<van-icon name="question-o" />
@@ -60,41 +86,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    accordion: '手风琴',
-    titleSlot: '自定义标题内容',
-    text: '代码是写出来给人看的，附带能在机器上运行',
-  },
-  'en-US': {
-    accordion: 'Accordion',
-    titleSlot: 'Custom title',
-    text: 'Content',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      active1: [0],
-      active2: 0,
-      active3: [],
-      active4: [],
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';