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

* feat(Uploader): add readonly prop

* chore: bump deps

src/uploader/README.md

@@ -300,6 +300,7 @@ export default {
 | preview-options | 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 `v3.1.5` | Whether to make upload area readonly | _boolean_ | `false` |
 | deletable | Whether to show delete icon | _boolean_ | `true` |
 | show-upload | Whether to show upload area | _boolean_ | `true` |
 | lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |

src/uploader/README.zh-CN.md

@@ -321,6 +321,7 @@ export default {
 | preview-options | 全屏图片预览的配置项，可选值见 [ImagePreview](#/zh-CN/image-preview) | _object_ | - |
 | multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` |
 | disabled | 是否禁用文件上传 | _boolean_ | `false` |
+| readonly `v3.1.5` | 是否将上传区域设置为只读状态 | _boolean_ | `false` |
 | deletable | 是否展示删除按钮 | _boolean_ | `true` |
 | show-upload | 是否展示上传区域 | _boolean_ | `true` |
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |

src/uploader/Uploader.tsx

@@ -60,6 +60,7 @@ export default defineComponent({
     capture: String,
     multiple: Boolean,
     disabled: Boolean,
+    readonly: Boolean,
     lazyLoad: Boolean,
     uploadText: String,
     deletable: truthProp,
@@ -311,7 +312,7 @@ export default defineComponent({
         return;
       }
 
-      const Input = (
+      const Input = props.readonly ? null : (
         <input
           ref={inputRef}
           type="file"
@@ -334,7 +335,10 @@ export default defineComponent({
       }
 
       return (
-        <div class={bem('upload')} style={getSizeStyle(props.previewSize)}>
+        <div
+          class={bem('upload', { readonly: props.readonly })}
+          style={getSizeStyle(props.previewSize)}
+        >
           <Icon name={props.uploadIcon} class={bem('upload-icon')} />
           {props.uploadText && (
             <span class={bem('upload-text')}>{props.uploadText}</span>

src/uploader/index.less

@@ -76,6 +76,10 @@
       background-color: var(--van-uploader-upload-active-color);
     }
 
+    &--readonly:active {
+      background-color: var(--van-uploader-upload-background-color);
+    }
+
     &-icon {
       color: var(--van-uploader-icon-color);
       font-size: var(--van-uploader-icon-size);

src/uploader/test/__snapshots__/index.spec.ts.snap

@@ -266,6 +266,17 @@ exports[`render preview image 1`] = `
 </div>
 `;
 
+exports[`should not render upload input when using readonly prop 1`] = `
+<div class="van-uploader">
+  <div class="van-uploader__wrapper">
+    <div class="van-uploader__upload van-uploader__upload--readonly">
+      <i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
+      </i>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`upload-icon prop 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">

src/uploader/test/index.spec.ts

@@ -609,3 +609,13 @@ test('preview-cover slot', async () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should not render upload input when using readonly prop', async () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      readonly: true,
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});