From 613ff2503510a48166fadb12d2c7ad1aee3db6bb Mon Sep 17 00:00:00 2001
From: Lindy <33708359+Lindysen@users.noreply.github.com>
Date: Thu, 6 Feb 2020 17:15:24 +0800
Subject: [PATCH] feat(Uploader): add uploader disabled style (#5628)

---
 src/style/var.less                                |  1 +
 src/uploader/README.md                            |  5 +++++
 src/uploader/README.zh-CN.md                      | 10 +++++++++-
 src/uploader/demo/index.vue                       |  6 ++++++
 src/uploader/index.js                             |  2 +-
 src/uploader/index.less                           |  4 ++++
 src/uploader/test/__snapshots__/demo.spec.js.snap |  8 ++++++++
 7 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/style/var.less b/src/style/var.less
index 3af11611d..3ed3c104a 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -790,6 +790,7 @@
 @uploader-mask-message-line-height: 14px;
 @uploader-loading-icon-size: 22px;
 @uploader-loading-icon-color: @white;
+@uploader-disabled-opacity: @disabled-opacity;
 
 // Sku
 @sku-item-background-color: @background-color;
diff --git a/src/uploader/README.md b/src/uploader/README.md
index dd705ea5f..3517323d1 100644
--- a/src/uploader/README.md
+++ b/src/uploader/README.md
@@ -44,6 +44,11 @@ export default {
   }
 };
 ```
+### Disabled
+
+```html
+<van-uploader disabled />
+```
 
 ### Upload Status
 
diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md
index f00886ce3..88da47b82 100644
--- a/src/uploader/README.zh-CN.md
+++ b/src/uploader/README.zh-CN.md
@@ -53,6 +53,14 @@ export default {
 };
 ```
 
+### 禁用
+
+通过`disabled`属性禁用文件上传
+
+```html
+<van-uploader disabled />
+```
+
 ### 上传状态
 
 通过`status`属性可以标识上传状态，`uploading`表示上传中，`failed`表示上传失败，`done`表示上传完成（从 2.4.7 版本开始支持）
@@ -190,7 +198,7 @@ export default {
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
 | oversize | 文件大小超过限制时触发 | 同`after-read` |
-| click-preview | 点击预览图时触发 | 同`after-read` | 
+| click-preview | 点击预览图时触发 | 同`after-read` |
 | close-preview | 关闭全屏图片预览时触发 | - |
 | delete | 删除文件预览时触发 | 同`after-read` |
 
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index a0272964d..a8b33610b 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -8,6 +8,10 @@
       <van-uploader v-model="fileList" multiple accept="*" />
     </demo-block>
 
+    <demo-block :title="$t('disabled')">
+      <van-uploader :after-read="afterRead" disabled />
+    </demo-block>
+
     <demo-block v-if="!isWeapp" :title="$t('status')">
       <van-uploader v-model="statusFileList" :after-read="afterReadFailed" />
     </demo-block>
@@ -38,6 +42,7 @@ export default {
       failed: '上传失败',
       upload: '上传文件',
       preview: '文件预览',
+      disabled: '禁用',
       maxCount: '限制上传数量',
       uploading: '上传中...',
       beforeRead: '上传前校验',
@@ -49,6 +54,7 @@ export default {
       failed: 'Failed',
       upload: 'Upload File',
       preview: 'Preview File',
+      disabled: 'Disabled',
       maxCount: 'Max Count',
       uploading: 'Uploading...',
       beforeRead: 'Before Read',
diff --git a/src/uploader/index.js b/src/uploader/index.js
index f53f4bf2e..e5df5871c 100644
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@@ -360,7 +360,7 @@ export default createComponent({
   render() {
     return (
       <div class={bem()}>
-        <div class={bem('wrapper')}>
+        <div class={bem('wrapper', { disabled: this.disabled })}>
           {this.genPreviewList()}
           {this.genUpload()}
         </div>
diff --git a/src/uploader/index.less b/src/uploader/index.less
index e548717c2..55178deb8 100644
--- a/src/uploader/index.less
+++ b/src/uploader/index.less
@@ -7,6 +7,10 @@
   &__wrapper {
     display: flex;
     flex-wrap: wrap;
+
+    &--disabled {
+      opacity: @uploader-disabled-opacity;
+    }
   }
 
   &__input {
diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap
index 5ffc08cb9..39ca3b7ae 100644
--- a/src/uploader/test/__snapshots__/demo.spec.js.snap
+++ b/src/uploader/test/__snapshots__/demo.spec.js.snap
@@ -32,6 +32,14 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-uploader">
+      <div class="van-uploader__wrapper van-uploader__wrapper--disabled">
+        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+            <!----></i><input type="file" accept="image/*" disabled="disabled" class="van-uploader__input"></div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-uploader">
       <div class="van-uploader__wrapper">