refactor: demo using script setup (#9235)

2021-08-11 10:55:10 +08:00
parent 010238b63c
commit 4c41908ac1
86 changed files with 4277 additions and 5151 deletions
@@ -1,3 +1,44 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    nextStep: '下一步',
+    step1: '买家下单',
+    step2: '商家接单',
+    step3: '买家提货',
+    step4: '交易完成',
+    title2: '描述信息',
+    title3: '竖向步骤条',
+    status1: '【城市】物流状态1',
+    status2: '【城市】物流状态',
+    status3: '快件已发货',
+    customStyle: '自定义样式',
+  },
+  'en-US': {
+    nextStep: 'Next Step',
+    step1: 'Step1',
+    step2: 'Step2',
+    step3: 'Step3',
+    step4: 'Step4',
+    title2: 'Description',
+    title3: 'Vertical Steps',
+    status1: '【City】Status1',
+    status2: '【City】Status2',
+    status3: '【City】Status3',
+    customStyle: 'Custom Style',
+  },
+};
+
+const t = useTranslate(i18n);
+const active = ref(1);
+
+const nextStep = () => {
+  active.value = ++active.value % 4;
+};
+</script>
+
 <template>
  <demo-block :title="t('basicUsage')">
    <van-steps :active="active">
@@ -42,57 +83,6 @@
  </demo-block>
 </template>

-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    nextStep: '下一步',
-    step1: '买家下单',
-    step2: '商家接单',
-    step3: '买家提货',
-    step4: '交易完成',
-    title2: '描述信息',
-    title3: '竖向步骤条',
-    status1: '【城市】物流状态1',
-    status2: '【城市】物流状态',
-    status3: '快件已发货',
-    customStyle: '自定义样式',
-  },
-  'en-US': {
-    nextStep: 'Next Step',
-    step1: 'Step1',
-    step2: 'Step2',
-    step3: 'Step3',
-    step4: 'Step4',
-    title2: 'Description',
-    title3: 'Vertical Steps',
-    status1: '【City】Status1',
-    status2: '【City】Status2',
-    status3: '【City】Status3',
-    customStyle: 'Custom Style',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const active = ref(1);
-
-    const nextStep = () => {
-      active.value = ++active.value % 4;
-    };
-
-    return {
-      t,
-      active,
-      nextStep,
-    };
-  },
-};
-</script>
-
 <style lang="less">
@import '../../style/var';