From a4ef370b0dbf3ddf58e36a800eba1b9d99ba309b Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 15 Dec 2020 15:14:36 +0800
Subject: [PATCH] docs(Uploader): use composition api

---
 src/uploader/README.md       | 101 ++++++++++++++--------
 src/uploader/README.zh-CN.md | 106 ++++++++++++++---------
 src/uploader/demo/index.vue  | 159 ++++++++++++++++++-----------------
 3 files changed, 215 insertions(+), 151 deletions(-)

diff --git a/src/uploader/README.md b/src/uploader/README.md
index c7f75eda4..d26acb1cc 100644
--- a/src/uploader/README.md
+++ b/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,25 +62,24 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      fileList: [
-        {
-          url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-          status: 'uploading',
-          message: 'Uploading...',
-        },
-        {
-          url: 'https://img.yzcdn.cn/vant/tree.jpg',
-          status: 'failed',
-          message: 'Failed',
-        },
-      ],
-    };
-  },
-  methods: {
-    afterRead(file) {
+  setup() {
+    const fileList = ref([
+      {
+        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+        status: 'uploading',
+        message: 'Uploading...',
+      },
+      {
+        url: 'https://img.yzcdn.cn/vant/tree.jpg',
+        status: 'failed',
+        message: 'Failed',
+      },
+    ]);
+
+    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,
+    };
   },
 };
 ```
diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md
index d9d67f355..204497938 100644
--- a/src/uploader/README.zh-CN.md
+++ b/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() {
+  setup() {
+    const fileList = ref([
+      { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+      // Uploader 根据文件后缀来判断是否为图片文件
+      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
+      { url: 'https://cloud-image', isImage: true },
+    ]);
+
     return {
-      fileList: [
-        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
-        // Uploader 根据文件后缀来判断是否为图片文件
-        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
-        { url: 'https://cloud-image', isImage: true },
-      ],
+      fileList,
     };
   },
 };
@@ -67,25 +75,24 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      fileList: [
-        {
-          url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-          status: 'uploading',
-          message: '上传中...',
-        },
-        {
-          url: 'https://img.yzcdn.cn/vant/tree.jpg',
-          status: 'failed',
-          message: '上传失败',
-        },
-      ],
-    };
-  },
-  methods: {
-    afterRead(file) {
+  setup() {
+    const fileList = ref([
+      {
+        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+        status: 'uploading',
+        message: '上传中...',
+      },
+      {
+        url: 'https://img.yzcdn.cn/vant/tree.jpg',
+        status: 'failed',
+        message: '上传失败',
+      },
+    ]);
+
+    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,
+    };
   },
 };
 ```
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index 5f59f1dee..7aeddcdf2 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -50,44 +50,49 @@
 </template>
 
 <script>
-export default {
-  i18n: {
-    'zh-CN': {
-      status: '上传状态',
-      failed: '上传失败',
-      upload: '上传文件',
-      preview: '文件预览',
-      maxSize: '限制上传大小',
-      disabled: '禁用文件上传',
-      maxCount: '限制上传数量',
-      uploading: '上传中...',
-      imageName: '图片名称',
-      beforeRead: '上传前置处理',
-      overSizeTip: '文件大小不能超过 500kb',
-      invalidType: '请上传 jpg 格式图片',
-      customUpload: '自定义上传样式',
-      previewCover: '自定义预览样式',
-    },
-    'en-US': {
-      status: 'Upload Status',
-      failed: 'Failed',
-      upload: 'Upload File',
-      preview: 'Preview File',
-      maxSize: 'Max Size',
-      disabled: 'Disable Uploader',
-      maxCount: 'Max Count',
-      uploading: 'Uploading...',
-      imageName: 'Image Name',
-      beforeRead: 'Before Read',
-      overSizeTip: 'File size cannot exceed 500kb',
-      invalidType: 'Please upload an image in jpg format',
-      customUpload: 'Custom Upload Area',
-      previewCover: 'Preview Cover',
-    },
-  },
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import Toast from '../../toast';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    status: '上传状态',
+    failed: '上传失败',
+    upload: '上传文件',
+    preview: '文件预览',
+    maxSize: '限制上传大小',
+    disabled: '禁用文件上传',
+    maxCount: '限制上传数量',
+    uploading: '上传中...',
+    imageName: '图片名称',
+    beforeRead: '上传前置处理',
+    overSizeTip: '文件大小不能超过 500kb',
+    invalidType: '请上传 jpg 格式图片',
+    customUpload: '自定义上传样式',
+    previewCover: '自定义预览样式',
+  },
+  'en-US': {
+    status: 'Upload Status',
+    failed: 'Failed',
+    upload: 'Upload File',
+    preview: 'Preview File',
+    maxSize: 'Max Size',
+    disabled: 'Disable Uploader',
+    maxCount: 'Max Count',
+    uploading: 'Uploading...',
+    imageName: 'Image Name',
+    beforeRead: 'Before Read',
+    overSizeTip: 'File size cannot exceed 500kb',
+    invalidType: 'Please upload an image in jpg format',
+    customUpload: 'Custom Upload Area',
+    previewCover: 'Preview Cover',
+  },
+};
+
+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(
-      {
-        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-        status: 'uploading',
-        message: this.t('uploading'),
-      },
-      {
-        url: 'https://img.yzcdn.cn/vant/tree.jpg',
-        status: 'failed',
-        message: this.t('failed'),
-      }
-    );
-
-    this.previewCoverFiles.push({
-      url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-      file: {
-        name: this.t('imageName'),
-      },
+      statusFileList: [
+        {
+          url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+          status: 'uploading',
+          message: t('uploading'),
+        },
+        {
+          url: 'https://img.yzcdn.cn/vant/tree.jpg',
+          status: 'failed',
+          message: t('failed'),
+        },
+      ],
+      previewCoverFiles: [
+        {
+          url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+          file: {
+            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>