docs(Steps): use composition api

src/skeleton/demo/index.vue

@@ -21,7 +21,7 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 

src/steps/README.md

@@ -25,11 +25,12 @@ app.use(Steps);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  steup() {
-    return {
+    const active = ref(1);
-      active: 1,
+    return { active };
-    };
   },
 };
 ```

src/steps/README.zh-CN.md

@@ -31,11 +31,12 @@ app.use(Steps);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  steup() {
-    return {
+    const active = ref(1);
-      active: 1,
+    return { active };
-    };
   },
 };
 ```

src/steps/demo/index.vue

@@ -42,9 +42,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { ref } from 'vue';
-  i18n: {
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     nextStep: '下一步',
     step1: '买家下单',
@@ -71,18 +73,22 @@ export default {
     status3: '【City】Status3',
     customStyle: 'Custom Style',
   },
-  },
-
-  data() {
-    return {
-      active: 1,
 };
-  },
 
-  methods: {
+export default {
-    nextStep() {
+  setup() {
-      this.active = ++this.active % 4;
+    const t = useTranslate(i18n);
-    },
+    const active = ref(1);
+
+    const nextStep = () => {
+      active.value = ++active.value % 4;
+    };
+
+    return {
+      t,
+      active,
+      nextStep,
+    };
   },
 };
 </script>