diff --git a/src/views/common/FileOrImageDisplay.vue b/src/views/common/FileOrImageDisplay.vue index 032fa98..40677bf 100644 --- a/src/views/common/FileOrImageDisplay.vue +++ b/src/views/common/FileOrImageDisplay.vue @@ -11,8 +11,15 @@
- +
图片加载失败 @@ -52,6 +59,7 @@ export default { documentKey: '', mode: 'view', type: 'desktop', + imageDimensions: null, } }, props: { @@ -112,7 +120,22 @@ export default { // 最终预览列表 finalPreviewList() { return this.previewSrcList.length > 0 ? this.previewSrcList : [this.imageUrl] - } + }, + imageStyle() { + if (!this.imageDimensions) { + return {} + } + const maxWidth = 600 + const maxHeight = 400 + const widthRatio = maxWidth / this.imageDimensions.width + const heightRatio = maxHeight / this.imageDimensions.height + const ratio = Math.min(widthRatio, heightRatio, 1) + + return { + width: `${Math.round(this.imageDimensions.width * ratio)}px`, + height: `${Math.round(this.imageDimensions.height * ratio)}px` + } + }, }, methods: { // 文件点击事件 @@ -126,6 +149,15 @@ export default { handleImageClick() { this.$emit('image-click', this.imageUrl) }, + handleImageLoad(event) { + const { naturalWidth, naturalHeight } = event?.target || {} + if (naturalWidth && naturalHeight) { + this.imageDimensions = { + width: naturalWidth, + height: naturalHeight + } + } + }, handleDocumentReady() { console.log('文档已准备就绪') }, @@ -138,6 +170,11 @@ export default { handleInitialized() { console.log('初始化完成') }, + }, + watch: { + imageUrl() { + this.imageDimensions = null + } } } @@ -215,10 +252,10 @@ export default { } .license-image { - width: 60%; - height: 60%; - max-width: 60%; - max-height: 60%; + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; display: block; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);