refactor: demo using script setup (#9235)

src/swipe/demo/index.vue

@@ -1,3 +1,37 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    title2: '懒加载',
+    title3: '监听 change 事件',
+    title4: '纵向滚动',
+    title5: '自定义滑块大小',
+    title6: '自定义指示器',
+    message: '当前 Swipe 索引：',
+  },
+  'en-US': {
+    title2: 'Lazy Render',
+    title3: 'Change Event',
+    title4: 'Vertical Scrolling',
+    title5: 'Set SwipeItem Size',
+    title6: 'Custom indicator',
+    message: 'Current Swipe index:',
+  },
+};
+
+const t = useTranslate(i18n);
+const images = [
+  'https://img.yzcdn.cn/vant/apple-1.jpg',
+  'https://img.yzcdn.cn/vant/apple-2.jpg',
+  'https://img.yzcdn.cn/vant/apple-3.jpg',
+  'https://img.yzcdn.cn/vant/apple-4.jpg',
+];
+
+const onChange = (index: number) => Toast(t('message') + index);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-swipe :autoplay="3000" indicator-color="white">
@@ -62,50 +96,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    title2: '懒加载',
-    title3: '监听 change 事件',
-    title4: '纵向滚动',
-    title5: '自定义滑块大小',
-    title6: '自定义指示器',
-    message: '当前 Swipe 索引：',
-  },
-  'en-US': {
-    title2: 'Lazy Render',
-    title3: 'Change Event',
-    title4: 'Vertical Scrolling',
-    title5: 'Set SwipeItem Size',
-    title6: 'Custom indicator',
-    message: 'Current Swipe index:',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const images = [
-      'https://img.yzcdn.cn/vant/apple-1.jpg',
-      'https://img.yzcdn.cn/vant/apple-2.jpg',
-      'https://img.yzcdn.cn/vant/apple-3.jpg',
-      'https://img.yzcdn.cn/vant/apple-4.jpg',
-    ];
-
-    const onChange = (index: number) => Toast(t('message') + index);
-
-    return {
-      t,
-      images,
-      onChange,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';