feat(Uploader): add preview-cover slot (#6707)
* feat(Uploader): add preview-cover slot * docs: upd * fix: case name
This commit is contained in:
+43
-17
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user