From 4c09027afe7aa0ca9969565b6e60b27741bc4ef4 Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 27 Nov 2019 16:49:45 +0800 Subject: [PATCH] feat(Uploader): add deletable prop (#2411) --- packages/uploader/README.md | 27 +++++++------- packages/uploader/index.ts | 71 +++++++++++++++++++----------------- packages/uploader/index.wxml | 1 + 3 files changed, 53 insertions(+), 46 deletions(-) diff --git a/packages/uploader/README.md b/packages/uploader/README.md index 689cd2fe..8ed28955 100644 --- a/packages/uploader/README.md +++ b/packages/uploader/README.md @@ -127,19 +127,20 @@ Page({ | 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-----------|-----------| -| name | 标识符，可以在回调函数的第二项参数中获取 | *string \| number* | - | -| accept | 接受的文件类型, 可选值为`all` `image` `file` | *string* | `image` | -| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *string \| number* | `80px` | -| preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` | -| preview-full-image | 是否在点击预览图后展示全屏图片预览 | *boolean* | `true` | -| multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` | -| disabled | 是否禁用文件上传 | *boolean* | `false` | -| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | *string \| string[]* | `['album', 'camera']` | -| disabled | 是否禁用文件上传 | *boolean* | `false` | -| max-size | 文件大小限制，单位为`byte` | *number* | - | -| max-count | 文件上传数量限制 | *number* | - | -| upload-text | 上传区域文字提示 | *string* | - | -| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` | +| name | 标识符，可以在回调函数的第二项参数中获取 | *string \| number* | - | - | +| accept | 接受的文件类型, 可选值为`all` `image` `file` | *string* | `image` | - | +| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *string \| number* | `80px` | - | +| preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` | - | +| preview-full-image | 是否在点击预览图后展示全屏图片预览 | *boolean* | `true` | - | +| multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` | - | +| disabled | 是否禁用文件上传 | *boolean* | `false` | - | +| deletable | 是否展示删除按钮 | *boolean* | `true` | - | +| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | *string \| string[]* | `['album', 'camera']` | - | +| disabled | 是否禁用文件上传 | *boolean* | `false` | - | +| max-size | 文件大小限制，单位为`byte` | *number* | - | - | +| max-count | 文件上传数量限制 | *number* | - | - | +| upload-text | 上传区域文字提示 | *string* | - | - | +| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` | - | ### Slot diff --git a/packages/uploader/index.ts b/packages/uploader/index.ts index 0ed6e48a..0fcabee1 100644 --- a/packages/uploader/index.ts +++ b/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' - ? isImageFile(item) - : item.isImage + typeof item.isImage === 'undefined' ? isImageFile(item) : item.isImage })); this.setData({ lists, isInCount: lists.length < maxCount }); }, @@ -110,40 +112,43 @@ VantComponent({ }); } - chooseFile.then((res: - WechatMiniprogram.ChooseImageSuccessCallbackResult | - WechatMiniprogram.ChooseMessageFileSuccessCallbackResult - ) => { - const file = multiple ? res.tempFiles : res.tempFiles[0]; + chooseFile.then( + ( + res: + | WechatMiniprogram.ChooseImageSuccessCallbackResult + | WechatMiniprogram.ChooseMessageFileSuccessCallbackResult + ) => { + const file = multiple ? res.tempFiles : res.tempFiles[0]; - // 检查文件大小 - if (file instanceof Array) { - const sizeEnable = file.every(item => item.size <= maxSize); - if (!sizeEnable) { + // 检查文件大小 + if (file instanceof Array) { + const sizeEnable = file.every(item => item.size <= maxSize); + 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) { - this.$emit('before-read', { - file, - name, - callback: (result: boolean) => { - if (result) { - // 开始上传 - this.$emit('after-read', { file, name }); + // 触发上传之前的钩子函数 + if (useBeforeRead) { + this.$emit('before-read', { + file, + name, + callback: (result: boolean) => { + if (result) { + // 开始上传 + this.$emit('after-read', { file, name }); + } } - } - }); - } else { - this.$emit('after-read', { file, name }); + }); + } else { + this.$emit('after-read', { file, name }); + } } - }); + ); }, deleteItem(event) { diff --git a/packages/uploader/index.wxml b/packages/uploader/index.wxml index 75315820..02546aa9 100644 --- a/packages/uploader/index.wxml +++ b/packages/uploader/index.wxml @@ -28,6 +28,7 @@ {{ item.name || item.url || item.path }}