refactor: demo using script setup (#9235)

src/list/demo/index.vue

@@ -1,3 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    errorInfo: '错误提示',
+    errorText: '请求失败，点击重新加载',
+    pullRefresh: '下拉刷新',
+    finishedText: '没有更多了',
+  },
+  'en-US': {
+    errorInfo: 'Error Info',
+    errorText: 'Request failed. Click to reload',
+    pullRefresh: 'PullRefresh',
+    finishedText: 'Finished',
+  },
+};
+
+const t = useTranslate(i18n);
+const list = ref([
+  {
+    items: [] as string[],
+    refreshing: false,
+    loading: false,
+    error: false,
+    finished: false,
+  },
+  {
+    items: [] as string[],
+    refreshing: false,
+    loading: false,
+    error: false,
+    finished: false,
+  },
+  {
+    items: [] as string[],
+    refreshing: false,
+    loading: false,
+    error: false,
+    finished: false,
+  },
+]);
+
+const onLoad = (index: number) => {
+  const currentList = list.value[index];
+  currentList.loading = true;
+
+  setTimeout(() => {
+    if (currentList.refreshing) {
+      currentList.items = [];
+      currentList.refreshing = false;
+    }
+
+    for (let i = 0; i < 10; i++) {
+      const text = currentList.items.length + 1;
+      currentList.items.push(text < 10 ? '0' + text : String(text));
+    }
+
+    currentList.loading = false;
+    currentList.refreshing = false;
+
+    // show error info in second demo
+    if (index === 1 && currentList.items.length === 10 && !currentList.error) {
+      currentList.error = true;
+    } else {
+      currentList.error = false;
+    }
+
+    if (currentList.items.length >= 40) {
+      currentList.finished = true;
+    }
+  }, 1000);
+};
+
+const onRefresh = (index: number) => {
+  list.value[index].finished = false;
+  onLoad(index);
+};
+</script>
+
 <template>
   <van-tabs>
     <van-tab :title="t('basicUsage')">
@@ -38,100 +119,6 @@
   </van-tabs>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    errorInfo: '错误提示',
-    errorText: '请求失败，点击重新加载',
-    pullRefresh: '下拉刷新',
-    finishedText: '没有更多了',
-  },
-  'en-US': {
-    errorInfo: 'Error Info',
-    errorText: 'Request failed. Click to reload',
-    pullRefresh: 'PullRefresh',
-    finishedText: 'Finished',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      list: [
-        {
-          items: [] as string[],
-          refreshing: false,
-          loading: false,
-          error: false,
-          finished: false,
-        },
-        {
-          items: [] as string[],
-          refreshing: false,
-          loading: false,
-          error: false,
-          finished: false,
-        },
-        {
-          items: [] as string[],
-          refreshing: false,
-          loading: false,
-          error: false,
-          finished: false,
-        },
-      ],
-    });
-
-    const onLoad = (index: number) => {
-      const list = state.list[index];
-      list.loading = true;
-
-      setTimeout(() => {
-        if (list.refreshing) {
-          list.items = [];
-          list.refreshing = false;
-        }
-
-        for (let i = 0; i < 10; i++) {
-          const text = list.items.length + 1;
-          list.items.push(text < 10 ? '0' + text : String(text));
-        }
-
-        list.loading = false;
-        list.refreshing = false;
-
-        // show error info in second demo
-        if (index === 1 && list.items.length === 10 && !list.error) {
-          list.error = true;
-        } else {
-          list.error = false;
-        }
-
-        if (list.items.length >= 40) {
-          list.finished = true;
-        }
-      }, 1000);
-    };
-
-    const onRefresh = (index: number) => {
-      state.list[index].finished = false;
-      onLoad(index);
-    };
-
-    return {
-      ...toRefs(state),
-      t,
-      onLoad,
-      onRefresh,
-    };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';