feat(Uploader): add deletable prop (#2411)

packages/uploader/README.md

@@ -127,19 +127,20 @@ Page({
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |-----------|-----------|-----------|-----------|-----------|
-| name | 标识符，可以在回调函数的第二项参数中获取 | *string \| number* | - |
+| name | 标识符，可以在回调函数的第二项参数中获取 | *string \| number* | - | - |
-| accept | 接受的文件类型, 可选值为`all` `image` `file` | *string* | `image` |
+| accept | 接受的文件类型, 可选值为`all` `image` `file` | *string* | `image` | - |
-| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *string \| number* | `80px` |
+| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *string \| number* | `80px` | - |
-| preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` |
+| preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` | - |
-| preview-full-image | 是否在点击预览图后展示全屏图片预览 | *boolean* | `true` |
+| preview-full-image | 是否在点击预览图后展示全屏图片预览 | *boolean* | `true` | - |
-| multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` |
+| multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` | - |
-| disabled | 是否禁用文件上传 | *boolean* | `false` |
+| disabled | 是否禁用文件上传 | *boolean* | `false` | - |
-| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | *string \| string[]* | `['album', 'camera']` |
+| deletable | 是否展示删除按钮 | *boolean* | `true` | - |
-| disabled | 是否禁用文件上传 | *boolean* | `false` |
+| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | *string \| string[]* | `['album', 'camera']` | - |
-| max-size | 文件大小限制，单位为`byte` | *number* | - |
+| disabled | 是否禁用文件上传 | *boolean* | `false` | - |
-| max-count | 文件上传数量限制 | *number* | - |
+| max-size | 文件大小限制，单位为`byte` | *number* | - | - |
-| upload-text | 上传区域文字提示 | *string* | - |
+| max-count | 文件上传数量限制 | *number* | - | - |
-| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` |
+| upload-text | 上传区域文字提示 | *string* | - | - |
+| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` | - |
 
 ### Slot
 

packages/uploader/index.ts

@@ -7,6 +7,8 @@ VantComponent({
     disabled: Boolean,
     multiple: Boolean,
     uploadText: String,
+    useSlot: Boolean,
+    useBeforeRead: Boolean,
     previewSize: {
       type: null,
       value: 90,
@@ -33,6 +35,10 @@ VantComponent({
       type: Number,
       value: 100
     },
+    deletable: {
+      type: Boolean,
+      value: true
+    },
     previewImage: {
       type: Boolean,
       value: true
@@ -44,9 +50,7 @@ VantComponent({
     imageFit: {
       type: String,
       value: 'scaleToFill'
-    },
+    }
-    useSlot: Boolean,
-    useBeforeRead: Boolean
   },
 
   data: {
@@ -61,9 +65,7 @@ VantComponent({
       const lists = fileList.map(item => ({
         ...item,
         isImage:
-          typeof item.isImage === 'undefined'
+          typeof item.isImage === 'undefined' ? isImageFile(item) : item.isImage
-            ? isImageFile(item)
-            : item.isImage
       }));
       this.setData({ lists, isInCount: lists.length < maxCount });
     },
@@ -110,40 +112,43 @@ VantComponent({
         });
       }
 
-      chooseFile.then((res:
+      chooseFile.then(
-        WechatMiniprogram.ChooseImageSuccessCallbackResult |
+        (
-        WechatMiniprogram.ChooseMessageFileSuccessCallbackResult
+          res:
-      ) => {
+            | WechatMiniprogram.ChooseImageSuccessCallbackResult
-        const file = multiple ? res.tempFiles : res.tempFiles[0];
+            | WechatMiniprogram.ChooseMessageFileSuccessCallbackResult
+        ) => {
+          const file = multiple ? res.tempFiles : res.tempFiles[0];
 
-        // 检查文件大小
+          // 检查文件大小
-        if (file instanceof Array) {
+          if (file instanceof Array) {
-          const sizeEnable = file.every(item => item.size <= maxSize);
+            const sizeEnable = file.every(item => item.size <= maxSize);
-          if (!sizeEnable) {
+            if (!sizeEnable) {
+              this.$emit('oversize', { name });
+              return;
+            }
+          } else if (file.size > maxSize) {
             this.$emit('oversize', { name });
             return;
           }
-        } else if (file.size > maxSize) {
-          this.$emit('oversize', { name });
-          return;
-        }
 
-        // 触发上传之前的钩子函数
+          // 触发上传之前的钩子函数
-        if (useBeforeRead) {
+          if (useBeforeRead) {
-          this.$emit('before-read', {
+            this.$emit('before-read', {
-            file,
+              file,
-            name,
+              name,
-            callback: (result: boolean) => {
+              callback: (result: boolean) => {
-              if (result) {
+                if (result) {
-                // 开始上传
+                  // 开始上传
-                this.$emit('after-read', { file, name });
+                  this.$emit('after-read', { file, name });
+                }
               }
-            }
+            });
-          });
+          } else {
-        } else {
+            this.$emit('after-read', { file, name });
-          this.$emit('after-read', { file, name });
+          }
         }
-      });
+      );
     },
 
     deleteItem(event) {

packages/uploader/index.wxml

@@ -28,6 +28,7 @@
         <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
       </view>
       <van-icon
+        wx:if="{{ deletable }}"
         name="clear"
         class="van-uploader__preview-delete"
         data-index="{{ index }}"