feat(Uploader): add readonly prop (#9257)

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

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

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>

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;