From ee40d1e974673a2fd8059f8b84f7e62889fbe8a0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 14 Aug 2021 09:16:16 +0800
Subject: [PATCH] feat(Uploader): add readonly prop (#9257)

---
 src/uploader/README.md       | 1 +
 src/uploader/README.zh-CN.md | 1 +
 src/uploader/index.js        | 5 +++--
 src/uploader/index.less      | 4 ++++
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/uploader/README.md b/src/uploader/README.md
index 775c4a6c3..83fe6726c 100644
--- a/src/uploader/README.md
+++ b/src/uploader/README.md
@@ -258,6 +258,7 @@ export default {
 | preview-options `v2.9.3` | Options of full screen image preview，see [ImagePreview](#/en-US/image-preview) | _object_ | - |
 | multiple | Whether to enable multiple selection pictures | _boolean_ | `false` |
 | disabled | Whether to disabled the upload | _boolean_ | `false` |
+| readonly `v2.12.26` | Whether to make upload area readonly | _boolean_ | `false` |
 | deletable | Whether to show delete icon | _boolean_ | `true` |
 | show-upload `v2.5.6` | Whether to show upload area | _boolean_ | `true` |
 | lazy-load `v2.6.2` | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md
index 06f666d74..7098bd98a 100644
--- a/src/uploader/README.zh-CN.md
+++ b/src/uploader/README.zh-CN.md
@@ -288,6 +288,7 @@ export default {
 | preview-options `v2.9.3` | 全屏图片预览的配置项，可选值见 [ImagePreview](#/zh-CN/image-preview) | _object_ | - |
 | multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` |
 | disabled | 是否禁用文件上传 | _boolean_ | `false` |
+| readonly `v2.12.26` | 是否将上传区域设置为只读状态 | _boolean_ | `false` |
 | deletable | 是否展示删除按钮 | _boolean_ | `true` |
 | show-upload `v2.5.6` | 是否展示上传区域 | _boolean_ | `true` |
 | lazy-load `v2.6.2` | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
diff --git a/src/uploader/index.js b/src/uploader/index.js
index 3b2914dcb..529a51f4f 100644
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@@ -24,6 +24,7 @@ export default createComponent({
 
   props: {
     disabled: Boolean,
+    readonly: Boolean,
     lazyLoad: Boolean,
     uploadText: String,
     afterRead: Function,
@@ -391,7 +392,7 @@ export default createComponent({
 
       const slot = this.slots();
 
-      const Input = (
+      const Input = this.readonly ? null : (
         <input
           {...{ attrs: this.$attrs }}
           ref="input"
@@ -422,7 +423,7 @@ export default createComponent({
       }
 
       return (
-        <div class={bem('upload')} style={style}>
+        <div class={bem('upload', { readonly: this.readonly })} style={style}>
           <Icon name={this.uploadIcon} class={bem('upload-icon')} />
           {this.uploadText && (
             <span class={bem('upload-text')}>{this.uploadText}</span>
diff --git a/src/uploader/index.less b/src/uploader/index.less
index cd8922065..8aeb6ccb6 100644
--- a/src/uploader/index.less
+++ b/src/uploader/index.less
@@ -48,6 +48,10 @@
       background-color: @uploader-upload-active-color;
     }
 
+    &--readonly:active {
+      background-color: @uploader-upload-background-color;
+    }
+
     &-icon {
       color: @uploader-icon-color;
       font-size: @uploader-icon-size;