From 42602096a3b57bb81bd2edf2e5fd5db711aed8ad Mon Sep 17 00:00:00 2001 From: xiaoxiaoyang Date: Fri, 29 Jul 2022 19:27:56 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=E4=B8=AD=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=97=A0=E6=95=88BUG=EF=BC=8C=E5=B9=B6?= =?UTF-8?q?=E4=BD=BF=E7=94=A8el-image=E8=BF=9B=E8=A1=8C=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/icons/svg/el/check.svg | 1 + src/icons/svg/el/zoom-in.svg | 1 + 2 files changed, 2 insertions(+) create mode 100644 src/icons/svg/el/check.svg create mode 100644 src/icons/svg/el/zoom-in.svg diff --git a/src/icons/svg/el/check.svg b/src/icons/svg/el/check.svg new file mode 100644 index 0000000..8d0f0db --- /dev/null +++ b/src/icons/svg/el/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/el/zoom-in.svg b/src/icons/svg/el/zoom-in.svg new file mode 100644 index 0000000..b30daa5 --- /dev/null +++ b/src/icons/svg/el/zoom-in.svg @@ -0,0 +1 @@ + \ No newline at end of file From 54191df33c3ab8c283c823bd5f080e9dd8bb1554 Mon Sep 17 00:00:00 2001 From: xiaoxiaoyang Date: Sat, 30 Jul 2022 11:32:49 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6=E4=B8=AD=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=97=A0=E6=95=88BUG=EF=BC=8C=E5=B9=B6?= =?UTF-8?q?=E4=BD=BF=E7=94=A8el-image=E8=BF=9B=E8=A1=8C=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../field-widget/picture-upload-widget.vue | 74 ++++++++++++++----- 1 file changed, 55 insertions(+), 19 deletions(-) diff --git a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue index 74db269..28e60c0 100644 --- a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue +++ b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue @@ -10,23 +10,46 @@ list-type="picture-card" :class="{'hideUploadDiv': uploadBtnHidden}" :limit="field.options.limit" :on-exceed="handlePictureExceed" :before-upload="beforePictureUpload" - :on-success="handlePictureUpload" :on-error="handleUploadError" - :before-remove="handleBeforeRemove" :on-remove="handlePictureRemove"> + :on-preview="handlePictureCardPreview" + :on-success="handlePictureUpload" :on-error="handleUploadError" > +
- -
- - - -
@@ -88,12 +111,13 @@ fileListBeforeRemove: [], //删除前的文件列表 uploadBtnHidden: false, - previewUrl: '', - showPreviewDialogFlag: false, + previewIndex: 1, // 初始预览图像索引 } }, computed: { - + previewList() { + return this.fileList.map(el => el.url); + } }, beforeCreate() { /* 这里不能访问方法和属性！！ */ @@ -202,7 +226,7 @@ } }, - updateFieldModelAndEmitDataChangeForRemove(file, fileList) { + updateFieldModelAndEmitDataChangeForRemove(file) { let oldValue = deepClone(this.fieldModel) let foundFileIdx = -1 this.fileListBeforeRemove.map((fi, idx) => { /* 跟element-ui不同，element-plus删除文件时this.fileList数组对应元素已被删除！！ */ @@ -218,14 +242,17 @@ this.emitFieldDataChange(this.fieldModel, oldValue) }, - handleBeforeRemove(file, fileList) { + handleBeforeRemove(fileList) { /* 保留删除之前的文件列表！！ */ this.fileListBeforeRemove = deepClone(fileList) }, - handlePictureRemove(file, fileList) { - this.updateFieldModelAndEmitDataChangeForRemove(file, fileList) - this.fileList = deepClone(fileList) //this.fileList = fileList + handlePictureRemove(file) { + this.handleBeforeRemove(this.fileList) // 由于自定义了 #file slot，需要手动调用 handleBeforeRemove，并移除 @before-remove 和 @remove + this.fileList.splice(this.fileList.indexOf(file), 1) // 删除所点击的文件 + this.updateFieldModelAndEmitDataChangeForRemove(file) + // this.fileList = deepClone(fileList // 由于是在自身进行的操作，故不需要重新赋值 + let fileList = deepClone(this.fileList); // 进行深拷贝，避免用户自定义函数对 fileList 进行修改时，影响组件内的数据 this.uploadBtnHidden = fileList.length >= this.field.options.limit if (!!this.field.options.onFileRemove) { @@ -246,6 +273,13 @@ }) } }, + + handlePictureCardPreview({ url }) { + // 设置图片索引为当前点击的图片 + this.previewIndex = this.previewList.indexOf(url) + // 模拟点击 组件下的 img 标签（点击事件被绑定在的每张 img 上） + this.$refs['imageRef'].$el.children[0].click() + } } } @@ -282,3 +316,5 @@ } + +