!340 fix:修改 UploadImg 组件预览图片的方式为 createImageViewer,解决列表预览图片层级出现错误

Merge pull request !340 from puhui999/master
This commit is contained in:
芋道源码 2023-12-03 11:01:11 +00:00 committed by Gitee
commit f9994c585c
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F

View File

@ -1,17 +1,17 @@
<template> <template>
<div class="upload-box"> <div class="upload-box">
<el-upload <el-upload
:action="updateUrl"
:id="uuid" :id="uuid"
:class="['upload', drag ? 'no-border' : '']"
:multiple="false"
:show-file-list="false"
:headers="uploadHeaders"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
:drag="drag"
:accept="fileType.join(',')" :accept="fileType.join(',')"
:action="updateUrl"
:before-upload="beforeUpload"
:class="['upload', drag ? 'no-border' : '']"
:drag="drag"
:headers="uploadHeaders"
:multiple="false"
:on-error="uploadError"
:on-success="uploadSuccess"
:show-file-list="false"
> >
<template v-if="modelValue"> <template v-if="modelValue">
<img :src="modelValue" class="upload-image" /> <img :src="modelValue" class="upload-image" />
@ -20,11 +20,11 @@
<Icon icon="ep:edit" /> <Icon icon="ep:edit" />
<span v-if="showBtnText">{{ t('action.edit') }}</span> <span v-if="showBtnText">{{ t('action.edit') }}</span>
</div> </div>
<div class="handle-icon" @click="imgViewVisible = true"> <div class="handle-icon" @click="imagePreview(modelValue)">
<Icon icon="ep:zoom-in" /> <Icon icon="ep:zoom-in" />
<span v-if="showBtnText">{{ t('action.detail') }}</span> <span v-if="showBtnText">{{ t('action.detail') }}</span>
</div> </div>
<div class="handle-icon" @click="deleteImg" v-if="showDelete"> <div v-if="showDelete" class="handle-icon" @click="deleteImg">
<Icon icon="ep:delete" /> <Icon icon="ep:delete" />
<span v-if="showBtnText">{{ t('action.del') }}</span> <span v-if="showBtnText">{{ t('action.del') }}</span>
</div> </div>
@ -42,11 +42,6 @@
<div class="el-upload__tip"> <div class="el-upload__tip">
<slot name="tip"></slot> <slot name="tip"></slot>
</div> </div>
<el-image-viewer
v-if="imgViewVisible"
@close="imgViewVisible = false"
:url-list="[modelValue]"
/>
</div> </div>
</template> </template>
@ -56,6 +51,7 @@ import type { UploadProps } from 'element-plus'
import { generateUUID } from '@/utils' import { generateUUID } from '@/utils'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { getAccessToken, getTenantId } from '@/utils/auth' import { getAccessToken, getTenantId } from '@/utils/auth'
import { createImageViewer } from '@/components/ImageViewer'
defineOptions({ name: 'UploadImg' }) defineOptions({ name: 'UploadImg' })
@ -92,7 +88,12 @@ const message = useMessage() // 消息弹窗
// id // id
const uuid = ref('id-' + generateUUID()) const uuid = ref('id-' + generateUUID())
// //
const imgViewVisible = ref(false) const imagePreview = (imgUrl: string) => {
createImageViewer({
zIndex: 9999999,
urlList: [imgUrl]
})
}
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
@ -130,7 +131,7 @@ const uploadError = () => {
message.notifyError('图片上传失败,请您重新上传!') message.notifyError('图片上传失败,请您重新上传!')
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss" scoped>
.is-error { .is-error {
.upload { .upload {
:deep(.el-upload), :deep(.el-upload),