mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-29 09:49:16 +08:00
feat(Uploader): add preview-cover slot (#6707)
* feat(Uploader): add preview-cover slot * docs: upd * fix: case name
This commit is contained in:
neverland
GitHub
parent
340a90feaa
commit
5793481ba4
@ -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
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ Vue.use(Uploader);
|
||||
|
||||
### 基础用法
|
||||
|
||||
文件上传完毕后会触发`after-read`回调函数，获取到对应的`file`对象
|
||||
文件上传完毕后会触发 `after-read` 回调函数，获取到对应的 `file` 对象。
|
||||
|
||||
```html
|
||||
<van-uploader :after-read="afterRead" />
|
||||
@ -32,7 +32,7 @@ export default {
|
||||
|
||||
### 文件预览
|
||||
|
||||
通过`v-model`可以绑定已经上传的文件列表，并展示文件列表的预览图
|
||||
通过`v-model`可以绑定已经上传的文件列表，并展示文件列表的预览图。
|
||||
|
||||
```html
|
||||
<van-uploader v-model="fileList" multiple />
|
||||
@ -53,17 +53,9 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 禁用
|
||||
|
||||
通过`disabled`属性禁用文件上传
|
||||
|
||||
```html
|
||||
<van-uploader disabled />
|
||||
```
|
||||
|
||||
### 上传状态
|
||||
|
||||
通过`status`属性可以标识上传状态，`uploading`表示上传中，`failed`表示上传失败，`done`表示上传完成（从 2.4.7 版本开始支持）
|
||||
通过 `status` 属性可以标识上传状态，`uploading` 表示上传中，`failed` 表示上传失败，`done` 表示上传完成。
|
||||
|
||||
```html
|
||||
<van-uploader v-model="fileList" :after-read="afterRead" />
|
||||
@ -103,7 +95,7 @@ export default {
|
||||
|
||||
### 限制上传数量
|
||||
|
||||
通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
|
||||
通过 `max-count` 属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。
|
||||
|
||||
```html
|
||||
<van-uploader v-model="fileList" multiple :max-count="2" />
|
||||
@ -121,22 +113,20 @@ export default {
|
||||
|
||||
### 限制上传大小
|
||||
|
||||
通过`max-size`属性可以限制上传文件的大小，超过大小的文件会被自动过滤，这些文件信息可以通过`oversize`事件获取
|
||||
通过 `max-size` 属性可以限制上传文件的大小，超过大小的文件会被自动过滤，这些文件信息可以通过 `oversize` 事件获取。
|
||||
|
||||
```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('文件大小不能超过 500kb');
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -144,17 +134,43 @@ export default {
|
||||
|
||||
### 自定义上传样式
|
||||
|
||||
通过插槽可以自定义上传区域的样式
|
||||
通过默认插槽可以自定义上传区域的样式。
|
||||
|
||||
```html
|
||||
<van-uploader>
|
||||
<van-button icon="photo" type="primary">上传文件</van-button>
|
||||
<van-button icon="plus" type="primary">上传文件</van-button>
|
||||
</van-uploader>
|
||||
```
|
||||
|
||||
### 上传前自定义处理
|
||||
### 自定义预览样式
|
||||
|
||||
通过传入`beforeRead`函数可以在上传前进行校验，返回`true`表示校验通过，返回`false`表示校验失败。支持返回`Promise`对 file 对象进行自定义处理，例如压缩图片。
|
||||
通过 `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>
|
||||
```
|
||||
|
||||
### 上传前置处理
|
||||
|
||||
通过传入 `beforeRead` 函数可以在上传前进行校验和处理，返回 `true` 表示校验通过，返回 `false` 表示校验失败。支持返回 `Promise` 对 file 对象进行自定义处理，例如压缩图片。
|
||||
|
||||
```html
|
||||
<van-uploader :before-read="beforeRead" />
|
||||
@ -191,12 +207,21 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 禁用文件上传
|
||||
|
||||
通过 `disabled` 属性禁用文件上传
|
||||
|
||||
```html
|
||||
<van-uploader disabled />
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model (fileList) | 已上传的文件列表 | _FileListItem[]_ | - |
|
||||
| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | _string_ | `image/*` |
|
||||
| name `v2.0.3` | 标识符，可以在回调函数的第二项参数中获取 | _number \| string_ | - |
|
||||
| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | _number \| string_ | `80px` |
|
||||
@ -207,13 +232,13 @@ export default {
|
||||
| deletable `v2.2.12` | 是否展示删除按钮 | _boolean_ | `true` |
|
||||
| show-upload `v2.5.6` | 是否展示上传区域 | _boolean_ | `true` |
|
||||
| lazy-load `v2.6.2` | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
|
||||
| capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | _string_ | - |
|
||||
| capture | 图片选取模式，可选值为 `camera` (直接调起摄像头) | _string_ | - |
|
||||
| after-read | 文件读取完成后的回调函数 | _Function_ | - |
|
||||
| before-read | 文件读取前的回调函数，返回`false`可终止文件读取，<br>支持返回`Promise` | _Function_ | - |
|
||||
| before-delete | 文件删除前的回调函数，返回`false`可终止文件读取，<br>支持返回`Promise` | _Function_ | - |
|
||||
| max-size | 文件大小限制，单位为`byte` | _number \| string_ | - |
|
||||
| before-read | 文件读取前的回调函数，返回 `false` 可终止文件读取，<br>支持返回`Promise` | _Function_ | - |
|
||||
| before-delete | 文件删除前的回调函数，返回 `false` 可终止文件读取，<br>支持返回`Promise` | _Function_ | - |
|
||||
| max-size | 文件大小限制，单位为 `byte` | _number \| string_ | - |
|
||||
| max-count | 文件上传数量限制 | _number \| string_ | - |
|
||||
| result-type `v2.2.7` | 文件读取结果类型，可选值为`file` `text` | _string_ | `dataUrl` |
|
||||
| result-type `v2.2.7` | 文件读取结果类型，可选值为 `file` `text` | _string_ | `dataUrl` |
|
||||
| upload-text | 上传区域文字提示 | _string_ | - |
|
||||
| image-fit `v2.1.5` | 预览图裁剪模式，可选值见 [Image](#/zh-CN/image) 组件 | _string_ | `cover` |
|
||||
| upload-icon `v2.5.4` | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photograph` |
|
||||
@ -229,9 +254,10 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------- | -------------- |
|
||||
| default | 自定义上传区域 |
|
||||
| 名称 | 说明 | SlotProps |
|
||||
| --- | --- | --- |
|
||||
| default | 自定义上传区域 | - |
|
||||
| preview-cover `v2.9.1` | 自定义覆盖在预览区域上方的内容 | `item: FileListItem` |
|
||||
|
||||
### 回调参数
|
||||
|
||||
@ -239,7 +265,7 @@ before-read、after-read、before-delete 执行时会传递以下回调参数：
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
| ------ | --------------------------------- | -------- |
|
||||
| file | 文件解析后的 file 对象 | _object_ |
|
||||
| file | file 对象 | _object_ |
|
||||
| detail | 额外信息，包含 name 和 index 字段 | _object_ |
|
||||
|
||||
### ResultType 可选值
|
||||
|
||||
@ -8,10 +8,6 @@
|
||||
<van-uploader v-model="fileList" multiple accept="*" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('disabled')">
|
||||
<van-uploader :after-read="afterRead" disabled />
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('status')">
|
||||
<van-uploader v-model="statusFileList" :after-read="afterReadFailed" />
|
||||
</demo-block>
|
||||
@ -24,23 +20,34 @@
|
||||
<van-uploader
|
||||
v-model="fileList4"
|
||||
multiple
|
||||
:max-count="5"
|
||||
:max-size="3 * 1024 * 1024"
|
||||
:max-size="500 * 1024"
|
||||
@oversize="onOversize"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('uploadStyle')">
|
||||
<demo-block :title="t('customUpload')">
|
||||
<van-uploader>
|
||||
<van-button type="primary" icon="photo">
|
||||
<van-button type="primary" icon="plus">
|
||||
{{ t('upload') }}
|
||||
</van-button>
|
||||
</van-uploader>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('previewCover')">
|
||||
<van-uploader v-model="previewCoverFiles">
|
||||
<template #preview-cover="{ file }">
|
||||
<div class="preview-cover van-ellipsis">{{ file.name }}</div>
|
||||
</template>
|
||||
</van-uploader>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('beforeRead')">
|
||||
<van-uploader v-model="fileList3" :before-read="beforeRead" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('disabled')">
|
||||
<van-uploader :after-read="afterRead" disabled />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -52,26 +59,32 @@ export default {
|
||||
failed: '上传失败',
|
||||
upload: '上传文件',
|
||||
preview: '文件预览',
|
||||
disabled: '禁用',
|
||||
maxSize: '限制上传大小',
|
||||
disabled: '禁用文件上传',
|
||||
maxCount: '限制上传数量',
|
||||
uploading: '上传中...',
|
||||
beforeRead: '上传前校验',
|
||||
uploadStyle: '自定义上传样式',
|
||||
imageName: '图片名称',
|
||||
beforeRead: '上传前置处理',
|
||||
overSizeTip: '文件大小不能超过 500kb',
|
||||
invalidType: '请上传 jpg 格式图片',
|
||||
maxSize: '限制上传大小(3M)',
|
||||
customUpload: '自定义上传样式',
|
||||
previewCover: '自定义预览样式',
|
||||
},
|
||||
'en-US': {
|
||||
status: 'Upload Status',
|
||||
failed: 'Failed',
|
||||
upload: 'Upload File',
|
||||
preview: 'Preview File',
|
||||
disabled: 'Disabled',
|
||||
maxSize: 'Max Size',
|
||||
disabled: 'Disable Uploader',
|
||||
maxCount: 'Max Count',
|
||||
uploading: 'Uploading...',
|
||||
imageName: 'Image Name',
|
||||
beforeRead: 'Before Read',
|
||||
uploadStyle: 'Upload Style',
|
||||
overSizeTip: 'File size cannot exceed 500kb',
|
||||
invalidType: 'Please upload an image in jpg format',
|
||||
maxSize: 'Max Size(3M)',
|
||||
customUpload: 'Custom Upload Area',
|
||||
previewCover: 'Preview Cover',
|
||||
},
|
||||
},
|
||||
|
||||
@ -83,8 +96,9 @@ export default {
|
||||
],
|
||||
fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
|
||||
fileList3: [],
|
||||
fileList4: [],
|
||||
fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
|
||||
statusFileList: [],
|
||||
previewCoverFiles: [],
|
||||
};
|
||||
},
|
||||
|
||||
@ -101,6 +115,13 @@ export default {
|
||||
message: this.t('failed'),
|
||||
}
|
||||
);
|
||||
|
||||
this.previewCoverFiles.push({
|
||||
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
|
||||
file: {
|
||||
name: this.t('imageName'),
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -129,6 +150,7 @@ export default {
|
||||
|
||||
onOversize(file, detail) {
|
||||
console.log(file, detail);
|
||||
this.$toast(this.t('overSizeTip'));
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -143,5 +165,17 @@ export default {
|
||||
.van-uploader {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
.preview-cover {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -318,6 +318,11 @@ export default createComponent({
|
||||
/>
|
||||
);
|
||||
|
||||
const PreviewCoverContent = this.slots('preview-cover', item);
|
||||
const PreviewCover = PreviewCoverContent && (
|
||||
<div class={bem('preview-cover')}>{PreviewCoverContent}</div>
|
||||
);
|
||||
|
||||
const Preview = isImageFile(item) ? (
|
||||
<Image
|
||||
fit={this.imageFit}
|
||||
@ -329,7 +334,9 @@ export default createComponent({
|
||||
onClick={() => {
|
||||
this.onPreviewImage(item);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{PreviewCover}
|
||||
</Image>
|
||||
) : (
|
||||
<div
|
||||
class={bem('file')}
|
||||
@ -342,6 +349,7 @@ export default createComponent({
|
||||
<div class={[bem('file-name'), 'van-ellipsis']}>
|
||||
{item.file ? item.file.name : item.url}
|
||||
</div>
|
||||
{PreviewCover}
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -83,6 +83,14 @@
|
||||
background-color: @uploader-delete-background-color;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__mask {
|
||||
|
||||
@ -32,14 +32,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper van-uploader__wrapper--disabled">
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" disabled="disabled" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
@ -87,6 +79,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
@ -96,7 +95,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__input-wrapper"><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><i class="van-icon van-icon-photo van-button__icon">
|
||||
<div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
|
||||
<!----></i><span class="van-button__text">
|
||||
上传文件
|
||||
</span></div>
|
||||
@ -104,6 +103,24 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
<div class="van-uploader__preview-cover">
|
||||
<div class="preview-cover van-ellipsis">图片名称</div>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
@ -112,5 +129,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper van-uploader__wrapper--disabled">
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" disabled="disabled" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -67,6 +67,31 @@ exports[`max-count prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preview-cover slot 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
<div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
|
||||
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
<div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
|
||||
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preview-size prop 1`] = `
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
|
||||
@ -507,3 +507,16 @@ test('multiFile upload filter max-size file', async () => {
|
||||
|
||||
expect(wrapper.emitted('oversize')[0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('preview-cover slot', () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
fileList: [{ url: IMAGE }, { url: IMAGE }],
|
||||
},
|
||||
scopedSlots: {
|
||||
'preview-cover': (item) => item.url,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user