refactor: demo using script setup (#9235)

src/stepper/demo/index.vue

@@ -1,3 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    step: '步长设置',
+    range: '限制输入范围',
+    integer: '限制输入整数',
+    roundTheme: '圆角风格',
+    customSize: '自定义大小',
+    beforeChange: '异步变更',
+    disableInput: '禁用输入框',
+    decimalLength: '固定小数位数',
+  },
+  'en-US': {
+    step: 'Step',
+    range: 'Range',
+    integer: 'Integer',
+    roundTheme: 'Round Theme',
+    customSize: 'Custom Size',
+    beforeChange: 'Before Change',
+    disableInput: 'Disable Input',
+    decimalLength: 'Decimal Length',
+  },
+};
+
+const t = useTranslate(i18n);
+const stepper1 = ref(1);
+const stepper2 = ref(1);
+const stepper3 = ref(1);
+const stepper4 = ref(1);
+const stepper5 = ref(1);
+const stepper6 = ref(1);
+const stepper7 = ref(1);
+const stepper8 = ref(1);
+const stepperRound = ref(1);
+const disabledInput = ref(1);
+
+const beforeChange = () => {
+  Toast.loading({ forbidClick: true });
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      Toast.clear();
+      resolve(true);
+    }, 500);
+  });
+};
+</script>
+
 <template>
   <demo-block card>
     <van-cell center :title="t('basicUsage')">
@@ -66,67 +118,3 @@
     </van-cell>
   </demo-block>
 </template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    step: '步长设置',
-    range: '限制输入范围',
-    integer: '限制输入整数',
-    roundTheme: '圆角风格',
-    customSize: '自定义大小',
-    beforeChange: '异步变更',
-    disableInput: '禁用输入框',
-    decimalLength: '固定小数位数',
-  },
-  'en-US': {
-    step: 'Step',
-    range: 'Range',
-    integer: 'Integer',
-    roundTheme: 'Round Theme',
-    customSize: 'Custom Size',
-    beforeChange: 'Before Change',
-    disableInput: 'Disable Input',
-    decimalLength: 'Decimal Length',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      stepper1: 1,
-      stepper2: 1,
-      stepper3: 1,
-      stepper4: 1,
-      stepper5: 1,
-      stepper6: 1,
-      stepper7: 1,
-      stepper8: 1,
-      stepperRound: 1,
-      disabledInput: 1,
-    });
-
-    const beforeChange = () => {
-      Toast.loading({ forbidClick: true });
-
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          Toast.clear();
-          resolve(true);
-        }, 500);
-      });
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      beforeChange,
-    };
-  },
-};
-</script>