diff --git a/src/style/var.less b/src/style/var.less index 4e8f0ac10..54f6f57ea 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -785,8 +785,10 @@ @uploader-mask-icon-size: 22px; @uploader-mask-message-font-size: @font-size-sm; @uploader-mask-message-line-height: 14px; +@uploader-loading-icon-size: 22px; +@uploader-loading-icon-color: @white; // Sku @sku-item-background-color: @background-color; -@sku-icon-gray-color: #dcdde0; +@sku-icon-gray-color: @gray-4; @sku-upload-mask-color: rgba(50, 50, 51, 0.8); diff --git a/src/uploader/README.md b/src/uploader/README.md index 2b62e02d9..dd705ea5f 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -45,7 +45,7 @@ export default { }; ``` -### Failed +### Upload Status ```html @@ -55,13 +55,29 @@ export default { export default { data() { return { - fileList: [] + 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) { - file.status = 'failed'; - file.message = 'Failed'; + file.status = 'uploading'; + file.message = 'Uploading...'; + + setTimeout(() => { + file.status = 'failed'; + file.message = 'Failed'; + }, 1000); } } }; diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 89ee41de0..f00886ce3 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -53,9 +53,9 @@ export default { }; ``` -### 上传失败 +### 上传状态 -将 file 的`status`设置为`failed`表示文件上传失败 +通过`status`属性可以标识上传状态,`uploading`表示上传中,`failed`表示上传失败,`done`表示上传完成(从 2.4.7 版本开始支持) ```html @@ -65,13 +65,29 @@ export default { export default { data() { return { - fileList: [] + 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) { - file.status = 'failed'; - file.message = '上传失败'; + file.status = 'uploading'; + file.message = '上传中...'; + + setTimeout(() => { + file.status = 'failed'; + file.message = '上传失败'; + }, 1000); } } }; diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue index d0f8614a4..a0272964d 100644 --- a/src/uploader/demo/index.vue +++ b/src/uploader/demo/index.vue @@ -8,8 +8,8 @@ - - + + @@ -34,19 +34,23 @@ export default { i18n: { 'zh-CN': { + status: '上传状态', failed: '上传失败', upload: '上传文件', preview: '文件预览', maxCount: '限制上传数量', + uploading: '上传中...', beforeRead: '上传前校验', uploadStyle: '自定义上传样式', invalidType: '请上传 jpg 格式图片', }, 'en-US': { + status: 'Upload Status', failed: 'Failed', upload: 'Upload File', preview: 'Preview File', maxCount: 'Max Count', + uploading: 'Uploading...', beforeRead: 'Before Read', uploadStyle: 'Upload Style', invalidType: 'Please upload an image in jpg format', @@ -61,16 +65,23 @@ export default { ], fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }], fileList3: [], - failedFileList: [], + statusFileList: [], }; }, created() { - this.failedFileList.push({ - url: 'https://img.yzcdn.cn/vant/leaf.jpg', - status: 'failed', - message: this.$t('failed'), - }); + 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'), + } + ); }, methods: { @@ -88,8 +99,13 @@ export default { }, afterReadFailed(item) { - item.status = 'failed'; - item.message = this.$t('failed'); + item.status = 'uploading'; + item.message = this.$t('uploading'); + + setTimeout(() => { + item.status = 'failed'; + item.message = this.$t('failed'); + }, 1000); }, }, }; diff --git a/src/uploader/index.js b/src/uploader/index.js index fa4b2b631..f53f4bf2e 100644 --- a/src/uploader/index.js +++ b/src/uploader/index.js @@ -5,6 +5,7 @@ import { toArray, readFile, isOversize, isImageFile } from './utils'; // Components import Icon from '../icon'; import Image from '../image'; +import Loading from '../loading'; import ImagePreview from '../image-preview'; const [createComponent, bem] = createNamespace('uploader'); @@ -224,8 +225,32 @@ export default createComponent({ } }, + genPreviewMask(item) { + const { status } = item; + + if (status === 'uploading' || status === 'failed') { + const MaskIcon = + status === 'failed' ? ( + + ) : ( + + ); + + return ( +
+ {MaskIcon} + {item.message && ( +
{item.message}
+ )} +
+ ); + } + }, + genPreviewItem(item, index) { - const DeleteIcon = this.deletable && ( + const showDelete = item.status !== 'uploading' && this.deletable; + + const DeleteIcon = showDelete && ( ); - const Mask = item.status === 'failed' && ( -
- - {item.message && ( -
{item.message}
- )} -
- ); - return (
{Preview} - {Mask} + {this.genPreviewMask(item)} {DeleteIcon}
); diff --git a/src/uploader/index.less b/src/uploader/index.less index 0d3e45a5b..e548717c2 100644 --- a/src/uploader/index.less +++ b/src/uploader/index.less @@ -102,6 +102,12 @@ } } + &__loading { + width: @uploader-loading-icon-size; + height: @uploader-loading-icon-size; + color: @uploader-loading-icon-color; + } + &__file { display: flex; flex-direction: column; diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap index b258121cd..5ffc08cb9 100644 --- a/src/uploader/test/__snapshots__/demo.spec.js.snap +++ b/src/uploader/test/__snapshots__/demo.spec.js.snap @@ -40,6 +40,16 @@ exports[`renders demo correctly 1`] = `
+
+
+
上传中...
+
+ +
+
+
+
+
上传失败