element-ui中el-image组件打开预览功能后,点击当前的图片,预览出来的不是当前,是切换后关闭之前的那一张

31 篇文章 1 订阅
5 篇文章 0 订阅

el-image组件它是先渲染好浏览图片的div,当点击图片时直接把隐藏的div显示出来。当关闭时就直接隐藏div,下次点击又是直接显示div,并没有处理图片顺序。所以再次打开就是展示关闭前的图片。

//如果想每次点击都显示第一张。目前一个方法就是监听图片添加一个点击事件,对this.srcList重新赋值就可以了
mounted() {
	document.addEventListener('click', (e) => {
		if (e.target.classList.contains('el-image__inner')) {
			let _srcList = this.srcList
			this.$set(this, 'srcList', [])
			this.$nextTick(() => {
				this.$set(this, 'srcList', _srcList)
			})
		}
	}, false)
}
  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
好的,我可以为你提供代码示例,但在开始前,请确认你已经安装了element-ui和vue。 首先,需要在你的组件引入element-ui的Upload组件和Message组件: ```javascript <template> <div> <el-upload class="upload-demo" ref="upload" action="/upload" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" multiple :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">jpg/png文件,文件大小不能超过2MB</div> </el-upload> </div> </template> <script> import { Message, Upload } from 'element-ui'; export default { components: { Upload }, data() { return { fileList: [] } }, methods: { handlePreview(file) { console.log(file); }, handleRemove(file, fileList) { const index = fileList.indexOf(file); fileList.splice(index, 1); }, beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { Message.error('上传图片只能是 JPG/PNG 格式!'); } if (!isLt2M) { Message.error('上传图片大小不能超过 2MB!'); } return isJPG && isLt2M; } } } </script> ``` 在这个示例,我们使用了`<el-upload>`标签来创建一个上传组件,并设置了一些属性来配置它的行为。其,`fileList`属性用于存储上传的文件列表,`multiple`属性表示可以同时上传多个文件,`before-upload`属性用于验证上传的文件是否符合要求,`on-preview`属性用于预览上传的图片,`on-remove`属性用于删除上传的文件。 在`beforeUpload`函数,我们使用了element-ui的`Message`组件来提示用户上传的文件是否符合要求。如果不符合要求,上传会被阻止。在`handleRemove`函数,我们使用了`fileList`数组的`splice()`方法来删除文件。在`handlePreview`函数,我们将文件对象打印到控制台上,你可以在这里进行图片预览操作。 希望这个示例能够对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值