diff --git a/example/pages/uploader/index.js b/example/pages/uploader/index.js index a584e2dd..ef14f611 100644 --- a/example/pages/uploader/index.js +++ b/example/pages/uploader/index.js @@ -12,7 +12,19 @@ Page({ fileList5: [], fileList6: [], cloudPath: [], - fileList7: [] + fileList7: [], + fileList8: [ + { + url: 'https://img.yzcdn.cn/vant/leaf.jpg', + status: 'uploading', + message: '上传中' + }, + { + url: 'https://img.yzcdn.cn/vant/tree.jpg', + status: 'failed', + message: '上传失败' + } + ] }, beforeRead(event) { diff --git a/example/pages/uploader/index.wxml b/example/pages/uploader/index.wxml index 226a2a68..2b3f7f08 100644 --- a/example/pages/uploader/index.wxml +++ b/example/pages/uploader/index.wxml @@ -41,6 +41,18 @@ /> + + + + +``` + +```js +Page({ + data: { + fileList: [ + { + url: 'https://img.yzcdn.cn/vant/leaf.jpg', + statue: 'uploading', + message: '上传中', + }, + { + url: 'https://img.yzcdn.cn/vant/tree.jpg', + status: 'failed', + message: '上传失败' + } + ] + } +}); +``` + ### 限制上传数量 通过`max-count`属性可以限制上传文件的数量,上传数量达到限制后,会自动隐藏上传区域 diff --git a/packages/uploader/index.json b/packages/uploader/index.json index 0a336c08..e00a5887 100644 --- a/packages/uploader/index.json +++ b/packages/uploader/index.json @@ -1,6 +1,7 @@ { "component": true, "usingComponents": { - "van-icon": "../icon/index" + "van-icon": "../icon/index", + "van-loading": "../loading/index" } } diff --git a/packages/uploader/index.less b/packages/uploader/index.less index fee171e1..3a44e6df 100644 --- a/packages/uploader/index.less +++ b/packages/uploader/index.less @@ -100,4 +100,36 @@ text-align: center; } } + + &__mask { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: @white; + background-color: @uploader-mask-background-color; + border-radius: @uploader-upload-border-radius; + + &-icon { + font-size: @uploader-mask-icon-size; + } + + &-message { + margin-top: 6px; + padding: 0 @padding-base; + font-size: @uploader-mask-message-font-size; + line-height: @uploader-mask-message-line-height; + } + } + + &__loading { + width: @uploader-loading-icon-size; + height: @uploader-loading-icon-size; + color: @uploader-loading-icon-color; + } } diff --git a/packages/uploader/index.wxml b/packages/uploader/index.wxml index dabbf5fd..417fb85e 100644 --- a/packages/uploader/index.wxml +++ b/packages/uploader/index.wxml @@ -27,6 +27,14 @@ {{ item.name || item.url || item.path }} + + + + {{ item.message }} +