diff --git a/src/uploader/README.md b/src/uploader/README.md
index 3f356c3b8..c598451eb 100644
--- a/src/uploader/README.md
+++ b/src/uploader/README.md
@@ -191,6 +191,39 @@ Use `disabled` prop to disable uploader.
```
+### Customize Single Preview Image Style
+
+```html
+
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+ data() {
+ return {
+ fileList = [
+ { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+ {
+ url: 'https://img.yzcdn.cn/vant/sand.jpg',
+ deletable: true,
+ beforeDelete: () => {
+ Toast('Customize the events and styles of a single preview image');
+ },
+ },
+ {
+ url: 'https://img.yzcdn.cn/vant/tree.jpg',
+ deletable: true,
+ imageFit: 'contain',
+ previewSize: 120,
+ },
+ ];
+ }
+ }
+};
+```
+
## API
### Props
diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md
index 85eb82c6e..f8271e42d 100644
--- a/src/uploader/README.zh-CN.md
+++ b/src/uploader/README.zh-CN.md
@@ -219,6 +219,41 @@ export default {
```
+### 自定义单个图片预览
+
+在 `v-model` 数组中设置单个预览图片属性，支持 `imageFit`,`deletable`,`previewSize`,`beforeDelete`
+
+```html
+
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+ data() {
+ return {
+ fileList = [
+ { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+ {
+ url: 'https://img.yzcdn.cn/vant/sand.jpg',
+ deletable: true,
+ beforeDelete: () => {
+ Toast('自定义单个预览图片的事件和样式');
+ },
+ },
+ {
+ url: 'https://img.yzcdn.cn/vant/tree.jpg',
+ deletable: true,
+ imageFit: 'contain',
+ previewSize: 120,
+ },
+ ];
+ }
+ }
+};
+```
+
## API
### Props
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index e28cbe625..607efbb7e 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -48,6 +48,15 @@
+
+
+
+
@@ -69,6 +78,8 @@ export default {
invalidType: '请上传 jpg 格式图片',
customUpload: '自定义上传样式',
previewCover: '自定义预览样式',
+ customPreviewImage: '自定义单个图片预览',
+ deleteMessage: '删除前置处理',
},
'en-US': {
status: 'Upload Status',
@@ -85,6 +96,8 @@ export default {
invalidType: 'Please upload an image in jpg format',
customUpload: 'Custom Upload Area',
previewCover: 'Preview Cover',
+ customPreviewImage: 'Custom single prevew image',
+ deleteMessage: 'Before Delete',
},
},
@@ -97,6 +110,22 @@ export default {
fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
fileList3: [],
fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
+ fileList5: [
+ { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+ {
+ url: 'https://img.yzcdn.cn/vant/sand.jpg',
+ deletable: true,
+ beforeDelete: () => {
+ this.$toast(this.t('deleteMessage'));
+ },
+ },
+ {
+ url: 'https://img.yzcdn.cn/vant/tree.jpg',
+ deletable: true,
+ imageFit: 'contain',
+ previewSize: 120,
+ },
+ ],
statusFileList: [],
previewCoverFiles: [],
};
diff --git a/src/uploader/index.js b/src/uploader/index.js
index 909bcbcf7..ffb315e9a 100644
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@@ -212,8 +212,9 @@ export default createComponent({
},
onDelete(file, index) {
- if (this.beforeDelete) {
- const response = this.beforeDelete(file, this.getDetail(index));
+ const beforeDelete = file.beforeDelete ?? this.beforeDelete;
+ if (beforeDelete) {
+ const response = beforeDelete(file, this.getDetail(index));
if (!response) {
return;
@@ -306,7 +307,8 @@ export default createComponent({
},
genPreviewItem(item, index) {
- const showDelete = item.status !== 'uploading' && this.deletable;
+ const deleteAble = item.deletable ?? this.deletable;
+ const showDelete = item.status !== 'uploading' && deleteAble;
const DeleteIcon = showDelete && (
{PreviewCoverContent}
);
+ const previewSize = item.previewSize ?? this.previewSize;
+ const imageFit = item.imageFit ?? this.imageFit;
+
const Preview = isImageFile(item) ? (
{
this.onPreviewImage(item);
diff --git a/src/uploader/test/__snapshots__/demo.spec.js.snap b/src/uploader/test/__snapshots__/demo.spec.js.snap
index 6eb7af534..3a8619efc 100644
--- a/src/uploader/test/__snapshots__/demo.spec.js.snap
+++ b/src/uploader/test/__snapshots__/demo.spec.js.snap
@@ -143,5 +143,35 @@ exports[`renders demo correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+