feat(Uploader): add preview-cover slot (#6707)

* feat(Uploader): add preview-cover slot

* docs: upd

* fix: case name
This commit is contained in:
neverland
2020-07-05 20:09:20 +08:00
committed by GitHub
parent 340a90feaa
commit 5793481ba4
8 changed files with 240 additions and 75 deletions
+43 -17
View File
@@ -43,12 +43,6 @@ export default {
};
```
### Disabled
```html
<van-uploader disabled />
```
### Upload Status
```html
@@ -106,32 +100,54 @@ export default {
### Max Size
```html
<van-uploader
multiple
:max-count="5"
:max-size="3 * 1024 * 1024"
@oversize="onOversize"
/>
<van-uploader multiple :max-size="500 * 1024" @oversize="onOversize" />
```
```js
import { Toast } from 'vant';
export default {
methods: {
onOversize(file) {
console.log(file);
Toast('File size cannot exceed 500kb);
},
},
};
```
### Upload Style
### Custom Upload Area
```html
<van-uploader>
<van-button icon="photo" type="primary">Upload Image</van-button>
<van-button icon="plus" type="primary">Upload Image</van-button>
</van-uploader>
```
### Preview Cover
```html
<van-uploader v-model="fileList">
<template #preview-cover="{ file }">
<div class="preview-cover van-ellipsis">{{ file.name }}</div>
</template>
</van-uploader>
<style>
.preview-cover {
position: absolute;
box-sizing: border-box;
bottom: 0;
width: 100%;
padding: 4px;
color: #fff;
font-size: 12px;
text-align: center;
background: rgba(0, 0, 0, 0.3);
}
</style>
```
### Before Read
```html
@@ -167,12 +183,21 @@ export default {
};
```
### Disable Uploader
Use `disabled` prop to disable uploader.
```html
<van-uploader disabled />
```
## API
### Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model (fileList) | List of uploaded files | _FileListItem[]_ | - |
| accept | Accepted [file type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) | _string_ | `image/*` |
| name `v2.0.3` | Input name | _number \| string_ | - |
| preview-size | Size of preview image | _number \| string_ | `80px` |
@@ -205,9 +230,10 @@ export default {
### Slots
| Name | Description |
| ------- | ----------- |
| default | Custom icon |
| Name | Description | SlotProps |
| --- | --- | --- |
| default | Custom icon | - |
| preview-cover `v2.9.1` | Custom content that covers the image preview | `item: FileListItem` |
### Parematers of before-read、after-read、before-delete