element-ui组件el-image预览功能关闭后无法从头开始_element ui 图片预览按esc 关闭图片第二次没用-CSDN博客

本文链接：https://blog.csdn.net/LzzMandy/article/details/119246242

本文讲述了如何修复Element-UI组件el-image预览时的顺序问题，通过修改hide方法和调整图片预览逻辑，确保关闭后重新打开显示正确的图片顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui 组件el-image预览功能，预览关闭后，再次打开时，记录了上次预览的顺序，

复现步骤：

有4张图分别是 A B C D，点击B图，预览右箭头操作B->C->D，关闭，点击B，此时看到的图片是D，我们需求是看到B

原因：

关闭时，没有把index置为0

解决：

1、修改node_modules/element-ui/packages/image/src/image-viewer.vue的hide方法，index=0，发现没效果

2、修改的位置不对，应该修改发布之后的js文件node_modules/element-ui/lib/image/index.js

3、预览时，每次从当前图片，循环预览，:preview-src-list="getSrcList(index)"

<template>
	<div class="hi-upload-file" ref="imgbox">
		<template v-if="arrFileData && arrFileData.length > 0">
			<!-- 1、图片展示 -->
			<div class="file-icon img" 
				v-for="(file,index) in arrFileData" 
				:style="{width:imgWidth,height:imgHeight+'px','margin-right':(index+1)%num==0?'0':marginSpan+'%'}"
				:key="index" 
			>
				<el-image :ref="'imgPreview'+index" :src="file.url" :preview-src-list="getSrcList(index)" :fit="'cover'" @error.once="loadError">
					<div slot="error" class="image-error"></div>
				</el-image>
			</div>
		</template>
		<template v-else>
			<span>暂无图片</span>
		</template>
	</div>
</template>

<script>
	import Vue from 'vue'
	import uploadUtil from '@/utils/uploadUtil.js'
	export default {
		props:{
			arrFileData:{
				type:Array,
				default:function(){
					return [];
				}
			},
			...
		},
		data() {
			return {
				...
				previewSrcList:[],//存所有的url
			};
    	},
    	// 坑1:this.$refs.imgbox这个对象不知道什么时候获取到，在watch和mounted均做一次处理
		watch: {
			arrFileData:{
				handler(newName, oldName) {
					..
					this.getPreviewSrcList();
				},
				deep: true
			}
		}, 
		mounted() {
			...
			this.getPreviewSrcList();
		},
		beforeDestroy(){
			this.previewSrcList=[];
		},
		methods: {
			getPreviewSrcList(){
				this.previewSrcList=this.arrFileData.map((ele)=>{
					return ele.url
				});
			},
			getSrcList(index){
				return this.previewSrcList.slice(index).concat(this.previewSrcList.slice(0, index));
			},
			/** 图片加载失败调用 */
			loadError(event){
				...
			},
			...
		}
  }
</script>
<style lang="stylus" scoped>
	@import "~assets/stylus/upload"
</style>

如果要修改el-image的样式，可以在父组件中如下修改即可

<style>
	[class*=" el-icon-"], [class^=el-icon-]{
		font-size: 30px;
		color:#fff;
	}
	.el-image-viewer__close{
		top:80px;
		right: 180px;
	}
	.el-image-viewer__mask{
		opacity: .6;
	}
	.el-image-viewer__next{
		right: 180px;
	}
	.el-image-viewer__prev{
		left: 180px;
	}
</style>
<style lang="stylus" scoped>
	@import "~assets/stylus/upload"
</style>