<el-image :preview-src-list="previewSrcList">
elementUI的图片组件,使用大图预览功能,有多个图片翻页查看时,如何获取当前显示的文件呢?
想要实现的功能是,翻到对应的图片可以点击下载,目前只能拿到点击打开大图的文件,上下翻页后如何获取当前文件呢?有没有翻页对应的事件?
<el-image :preview-src-list="previewSrcList">
elementUI的图片组件,使用大图预览功能,有多个图片翻页查看时,如何获取当前显示的文件呢?
想要实现的功能是,翻到对应的图片可以点击下载,目前只能拿到点击打开大图的文件,上下翻页后如何获取当前文件呢?有没有翻页对应的事件?
你可以使用image-viewer,这个组件el
没有写进文档里,
看源码提供了onSwitch
和onClose
的方法,onSwitch
方法返回了当前的图片的下标index
使用参考
<template>
<div>
<el-button @click="showViewer=true">预览</el-button>
<el-image-viewer
v-if="showViewer"
:on-close="()=>{showViewer=false}"
:url-list="imgList" />
</div>
</template>
<script>
export default {
name: 'Index',
components: {
'el-image-viewer':()=>import('element-ui/packages/image/src/image-viewer')
},
data() {
return {
showViewer: false,
imgList:[ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']
}
}
</script>
13 回答12.8k 阅读
8 回答2.6k 阅读
2 回答5.1k 阅读✓ 已解决
9 回答1.7k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
5 回答848 阅读
6 回答944 阅读
拿不到,image-viewer只暴露了on-close
---------更新-------
用下面老哥的方式也可以,但是记得设置babel转换代码