feat(Uploader): add uploader disabled style (#5628)

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;

src/uploader/README.md

@@ -44,6 +44,11 @@ export default {
   }
 };
 ```
+### Disabled
+
+```html
+<van-uploader disabled />
+```
 
 ### Upload Status
 

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` |
 

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',

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>

src/uploader/index.less

@@ -7,6 +7,10 @@
   &__wrapper {
     display: flex;
     flex-wrap: wrap;
+
+    &--disabled {
+      opacity: @uploader-disabled-opacity;
+    }
   }
 
   &__input {

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">