docs(Uploader): use composition api

src/uploader/README.md

@@ -20,10 +20,14 @@ app.use(Uploader);
 
 ```js
 export default {
-  methods: {
-    afterRead(file) {
+  setup() {
+    const afterRead = (file) => {
       console.log(file);
-    },
+    };
+
+    return {
+      afterRead,
+    };
   },
 };
 ```
@@ -35,10 +39,17 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const fileList = ref([
+      { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+      { url: 'https://cloud-image', isImage: true },
+    ]);
+
     return {
-      fileList: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
+      fileList,
     };
   },
 };
@@ -51,10 +62,11 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      fileList: [
+  setup() {
+    const fileList = ref([
       {
         url: 'https://img.yzcdn.cn/vant/leaf.jpg',
         status: 'uploading',
@@ -65,11 +77,9 @@ export default {
         status: 'failed',
         message: 'Failed',
       },
-      ],
-    };
-  },
-  methods: {
-    afterRead(file) {
+    ]);
+
+    const afterRead = (file) => {
       file.status = 'uploading';
       file.message = 'Uploading...';
 
@@ -77,7 +87,12 @@ export default {
         file.status = 'failed';
         file.message = 'Failed';
       }, 1000);
-    },
+    };
+
+    return {
+      fileList,
+      afterRead,
+    };
   },
 };
 ```
@@ -89,10 +104,14 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const fileList = ref([]);
+
     return {
-      fileList: [],
+      fileList,
     };
   },
 };
@@ -108,11 +127,15 @@ export default {
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onOversize(file) {
+  setup() {
+    const onOversize = (file) => {
       console.log(file);
-      Toast('File size cannot exceed 500kb);
-    },
+      Toast('File size cannot exceed 500kb');
+    };
+
+    return {
+      onOversize,
+    };
   },
 };
 ```
@@ -159,15 +182,18 @@ export default {
 import { Toast } from 'vant';
 
 export default {
-  methods: {
-    beforeRead(file) {
+  setup() {
+    // 返回布尔值
+    const beforeRead = (file) => {
       if (file.type !== 'image/jpeg') {
         Toast('Please upload an image in jpg format');
         return false;
       }
       return true;
-    },
-    asyncBeforeRead(file) {
+    };
+
+    // 返回 Promise
+    const asyncBeforeRead = (file) => {
       return new Promise((resolve, reject) => {
         if (file.type !== 'image/jpeg') {
           Toast('Please upload an image in jpg format');
@@ -179,7 +205,12 @@ export default {
           resolve(img);
         }
       });
-    },
+    };
+
+    return {
+      beforeRead,
+      asyncBeforeRead,
+    };
   },
 };
 ```

src/uploader/README.zh-CN.md

@@ -26,11 +26,15 @@ app.use(Uploader);
 
 ```js
 export default {
-  methods: {
-    afterRead(file) {
+  setup() {
+    const afterRead = (file) => {
       // 此时可以自行将文件上传至服务器
       console.log(file);
-    },
+    };
+
+    return {
+      afterRead,
+    };
   },
 };
 ```
@@ -44,15 +48,19 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      fileList: [
+  setup() {
+    const fileList = ref([
       { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
       // Uploader 根据文件后缀来判断是否为图片文件
       // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
       { url: 'https://cloud-image', isImage: true },
-      ],
+    ]);
+
+    return {
+      fileList,
     };
   },
 };
@@ -67,10 +75,11 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      fileList: [
+  setup() {
+    const fileList = ref([
       {
         url: 'https://img.yzcdn.cn/vant/leaf.jpg',
         status: 'uploading',
@@ -81,11 +90,9 @@ export default {
         status: 'failed',
         message: '上传失败',
       },
-      ],
-    };
-  },
-  methods: {
-    afterRead(file) {
+    ]);
+
+    const afterRead = (file) => {
       file.status = 'uploading';
       file.message = '上传中...';
 
@@ -93,7 +100,12 @@ export default {
         file.status = 'failed';
         file.message = '上传失败';
       }, 1000);
-    },
+    };
+
+    return {
+      fileList,
+      afterRead,
+    };
   },
 };
 ```
@@ -107,10 +119,14 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const fileList = ref([]);
+
     return {
-      fileList: [],
+      fileList,
     };
   },
 };
@@ -125,14 +141,18 @@ export default {
 ```
 
 ```js
-import Toast from 'vant';
+import { Toast } from 'vant';
 
 export default {
-  methods: {
-    onOversize(file) {
+  setup() {
+    const onOversize = (file) => {
       console.log(file);
       Toast('文件大小不能超过 500kb');
-    },
+    };
+
+    return {
+      onOversize,
+    };
   },
 };
 ```
@@ -185,17 +205,18 @@ export default {
 import { Toast } from 'vant';
 
 export default {
-  methods: {
+  setup() {
     // 返回布尔值
-    beforeRead(file) {
+    const beforeRead = (file) => {
       if (file.type !== 'image/jpeg') {
         Toast('请上传 jpg 格式图片');
         return false;
       }
       return true;
-    },
+    };
+
     // 返回 Promise
-    asyncBeforeRead(file) {
+    const asyncBeforeRead = (file) => {
       return new Promise((resolve, reject) => {
         if (file.type !== 'image/jpeg') {
           Toast('请上传 jpg 格式图片');
@@ -207,7 +228,12 @@ export default {
           resolve(img);
         }
       });
-    },
+    };
+
+    return {
+      beforeRead,
+      asyncBeforeRead,
+    };
   },
 };
 ```

src/uploader/demo/index.vue

@@ -50,8 +50,11 @@
 </template>
 
 <script>
-export default {
-  i18n: {
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
+
+const i18n = {
   'zh-CN': {
     status: '上传状态',
     failed: '上传失败',
@@ -84,10 +87,12 @@ export default {
     customUpload: 'Custom Upload Area',
     previewCover: 'Preview Cover',
   },
-  },
+};
 
-  data() {
-    return {
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       fileList: [
         { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
         { url: 'https://img.yzcdn.cn/vant/tree.jpg' },
@@ -95,61 +100,63 @@ export default {
       fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
       fileList3: [],
       fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
-      statusFileList: [],
-      previewCoverFiles: [],
-    };
-  },
-
-  created() {
-    this.statusFileList.push(
+      statusFileList: [
         {
           url: 'https://img.yzcdn.cn/vant/leaf.jpg',
           status: 'uploading',
-        message: this.t('uploading'),
+          message: t('uploading'),
         },
         {
           url: 'https://img.yzcdn.cn/vant/tree.jpg',
           status: 'failed',
-        message: this.t('failed'),
-      }
-    );
-
-    this.previewCoverFiles.push({
+          message: t('failed'),
+        },
+      ],
+      previewCoverFiles: [
+        {
           url: 'https://img.yzcdn.cn/vant/leaf.jpg',
           file: {
-        name: this.t('imageName'),
+            name: t('imageName'),
           },
+        },
+      ],
     });
-  },
 
-  methods: {
-    beforeRead(file) {
+    const beforeRead = (file) => {
       if (file.type !== 'image/jpeg') {
-        this.$toast(this.t('invalidType'));
+        Toast(t('invalidType'));
         return false;
       }
-
       return true;
-    },
+    };
 
-    afterRead(file, detail) {
+    const afterRead = (file, detail) => {
       console.log(file, detail);
-    },
+    };
 
-    afterReadFailed(item) {
+    const afterReadFailed = (item) => {
       item.status = 'uploading';
-      item.message = this.t('uploading');
+      item.message = t('uploading');
 
       setTimeout(() => {
         item.status = 'failed';
-        item.message = this.t('failed');
+        item.message = t('failed');
       }, 1000);
-    },
+    };
 
-    onOversize(file, detail) {
+    const onOversize = (file, detail) => {
       console.log(file, detail);
-      this.$toast(this.t('overSizeTip'));
-    },
+      Toast(t('overSizeTip'));
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      afterRead,
+      beforeRead,
+      onOversize,
+      afterReadFailed,
+    };
   },
 };
 </script>