Merge pull request #11 from xiaoyang724/master

修复图片上传组件中预览点击无效BUG,并使用el-image进行显示
This commit is contained in:
vform666 2022-08-07 09:56:15 +08:00 committed by GitHub
commit 9077e828cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 19 deletions

View File

@ -10,23 +10,46 @@
list-type="picture-card" :class="{'hideUploadDiv': uploadBtnHidden}"
:limit="field.options.limit" :on-exceed="handlePictureExceed" :on-preview="handlePicturePreview"
:before-upload="beforePictureUpload"
:on-success="handlePictureUpload" :on-error="handleUploadError"
:before-remove="handleBeforeRemove" :on-remove="handlePictureRemove">
:on-preview="handlePictureCardPreview"
:on-success="handlePictureUpload" :on-error="handleUploadError" >
<template #file="{ file }">
<el-image
ref="imageRef"
style="width: 100%; height: 100%"
:src="file.url"
:preview-src-list="previewList"
:initial-index="previewIndex"
fit="cover"
preview-teleported
/>
<!-- 上传成功状态 -->
<label class="el-upload-list__item-status-label">
<i class="el-icon--upload-success" style="color: #FFF"><svg-icon class="" icon-class="el-check" /></i>
</label>
<!-- 图片操作按钮 -->
<span class="el-upload-list__item-actions">
<!-- 预览 -->
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<svg-icon icon-class="el-zoom-in" />
</span>
<!-- 删除 -->
<span
class="el-upload-list__item-delete"
@click="handlePictureRemove(file)"
>
<svg-icon icon-class="el-delete" />
</span>
</span>
</template>
<template #tip>
<div class="el-upload__tip"
v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
</template>
<div class="uploader-icon"><svg-icon icon-class="el-plus" /></div>
</el-upload>
<div v-if="showPreviewDialogFlag" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog title="" v-model="showPreviewDialogFlag"
append-to-body width="60%"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="true" :close-on-press-escape="true" :destroy-on-close="true">
<img :src="previewUrl" style="width: 100%" alt="" />
</el-dialog>
</div>
</form-item-wrapper>
</template>
@ -88,12 +111,13 @@
fileListBeforeRemove: [], //
uploadBtnHidden: false,
previewUrl: '',
showPreviewDialogFlag: false,
previewIndex: 1, //
}
},
computed: {
previewList() {
return this.fileList.map(el => el.url);
}
},
beforeCreate() {
/* 这里不能访问方法和属性!! */
@ -207,7 +231,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数组对应元素已被删除 */
@ -223,14 +247,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) {
@ -252,6 +279,13 @@
}
},
handlePictureCardPreview({ url }) {
//
this.previewIndex = this.previewList.indexOf(url)
// <el-image> img img
this.$refs['imageRef'].$el.children[0].click()
}
}
}
</script>
@ -287,3 +321,5 @@
}
</style>

View File

@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"></path></svg>

After

Width:  |  Height:  |  Size: 243 B

View File

@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"></path></svg>

After

Width:  |  Height:  |  Size: 383 B