diff --git a/src/views/common/FileOrImageDisplay.vue b/src/views/common/FileOrImageDisplay.vue index 40677bf..a0537fe 100644 --- a/src/views/common/FileOrImageDisplay.vue +++ b/src/views/common/FileOrImageDisplay.vue @@ -18,7 +18,6 @@ fit="fill" hide-on-click-modal :style="imageStyle" - @load="handleImageLoad" >
@@ -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) { - 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) - + const width = typeof this.imageWidth === 'number' ? `${this.imageWidth}px` : this.imageWidth + const height = typeof this.imageHeight === 'number' ? `${this.imageHeight}px` : this.imageHeight return { - width: `${Math.round(this.imageDimensions.width * ratio)}px`, - height: `${Math.round(this.imageDimensions.height * ratio)}px` + width, + 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 - } } }