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

This commit is contained in:
neverland 2021-08-14 09:16:16 +08:00 committed by GitHub
parent 4ff44356fa
commit ee40d1e974
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 2 deletions

View File

@ -258,6 +258,7 @@ export default {
| preview-options `v2.9.3` | Options of full screen image previewsee [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 loadshould register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |

View File

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

View File

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

View File

@ -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;