From 0e68369d47413695f658708db48fab8e0bbaa7c5 Mon Sep 17 00:00:00 2001 From: Jontyy Date: Mon, 21 Dec 2020 21:34:42 +0800 Subject: [PATCH 1/3] feat(uploader): add single uploader preview image style (#7776) add single uploader preview image style --- src/uploader/README.md | 33 +++++++++++++++++ src/uploader/README.zh-CN.md | 35 +++++++++++++++++++ src/uploader/demo/index.vue | 29 +++++++++++++++ src/uploader/index.js | 17 +++++---- .../test/__snapshots__/demo.spec.js.snap | 30 ++++++++++++++++ 5 files changed, 138 insertions(+), 6 deletions(-) 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`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`; From 1d044335e403809a743d8dd95b0922fe6c71d7a1 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 21 Dec 2020 21:37:33 +0800 Subject: [PATCH 2/3] chore: release 2.12.0-beta.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c773a4d5b..1718a791e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "2.11.3", + "version": "2.12.0-beta.0", "description": "Mobile UI Components built on Vue", "main": "lib/index.js", "module": "es/index.js", From 74d16f26492e4622b62a5e306f952d5c4b5026f3 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 21 Dec 2020 21:46:11 +0800 Subject: [PATCH 3/3] docs(changelog): 2.12.0-beta.0 --- docs/markdown/changelog.en-US.md | 18 ++++++++++++++++++ docs/markdown/changelog.zh-CN.md | 18 ++++++++++++++++++ src/uploader/README.zh-CN.md | 2 +- 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md index f0e39112f..378bc436f 100644 --- a/docs/markdown/changelog.en-US.md +++ b/docs/markdown/changelog.en-US.md @@ -16,6 +16,24 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/). ## Details +### [v2.12.0-beta.0](https://github.com/youzan/vant/compare/v2.11.3...v2.12.0-beta.0) + +`2020-12-21` + +**New Component** + +- add Cascader component [#7771](https://github.com/youzan/vant/pull/7771) + + + +**Feature** + +- uploader: add single uploader preview image style [#7776](https://github.com/youzan/vant/issues/7776) + +**Bug Fixes** + +- Tab: should scroll into view when title changed [c919e9](https://github.com/youzan/vant/commit/c919e9dedaae8ecde8be944032e26474829c1253) + ### [v2.11.3](https://github.com/youzan/vant/compare/v2.11.2...v2.11.3) `2020-12-18` diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index cfc176739..cc577034b 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -16,6 +16,24 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 ## 更新内容 +### [v2.12.0-beta.0](https://github.com/youzan/vant/compare/v2.11.3...v2.12.0-beta.0) + +`2020-12-21` + +**New Component** + +- 新增 Cascader 级联选择组件 [#7771](https://github.com/youzan/vant/pull/7771) + + + +**Feature** + +- uploader: 支持在 fileList 的选项中单独配置 `imageFit` `deletable` `previewSize` `beforeDelete` 字段 [#7776](https://github.com/youzan/vant/issues/7776) + +**Bug Fixes** + +- Tab: 修复动态修改标题后标签栏的滚动位置不正确的问题 [c919e9](https://github.com/youzan/vant/commit/c919e9dedaae8ecde8be944032e26474829c1253) + ### [v2.11.3](https://github.com/youzan/vant/compare/v2.11.2...v2.11.3) `2020-12-18` diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index f8271e42d..e0ee53bb6 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -221,7 +221,7 @@ export default { ### 自定义单个图片预览 -在 `v-model` 数组中设置单个预览图片属性，支持 `imageFit`,`deletable`,`previewSize`,`beforeDelete` +在 `v-model` 数组中设置单个预览图片属性，支持 `imageFit` `deletable` `previewSize` `beforeDelete`，从 2.12 版本开始支持。 ```html