页面样式修改

src/views/common/FileOrImageDisplay.vue

@@ -18,7 +18,6 @@
                     fit="fill"
                     hide-on-click-modal
                     :style="imageStyle"
-                    @load="handleImageLoad"
                 >
                     <div slot="error" class="image-error">
                         <i class="el-icon-picture"></i>
@@ -59,7 +58,6 @@ export default {
             documentKey: '',
             mode: 'view',
             type: 'desktop',
-            imageDimensions: null,
         }
     },
     props: {
@@ -102,6 +100,16 @@ export default {
         fileTypeValue: {
             type: [Number, String],
             default: '2'
+        },
+        // 固定图片宽度
+        imageWidth: {
+            type: [Number, String],
+            default: 600
+        },
+        // 固定图片高度
+        imageHeight: {
+            type: [Number, String],
+            default: 400
         }
     },
     computed: {
@@ -122,18 +130,11 @@ export default {
             return this.previewSrcList.length > 0 ? this.previewSrcList : [this.imageUrl]
         },
         imageStyle() {
-            if (!this.imageDimensions) {
+            const width = typeof this.imageWidth === 'number' ? `${this.imageWidth}px` : this.imageWidth
-                return {}
+            const height = typeof this.imageHeight === 'number' ? `${this.imageHeight}px` : this.imageHeight
-            }
-            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`,
+                width,
-                height: `${Math.round(this.imageDimensions.height * ratio)}px`
+                height
             }
         },
     },
@@ -149,15 +150,6 @@ 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('文档已准备就绪')
         },
@@ -170,11 +162,6 @@ export default {
         handleInitialized() {
             console.log('初始化完成')
         },
-    },
-    watch: {
-        imageUrl() {
-            this.imageDimensions = null
-        }
     }
 }
 </script>