element图片预览组件如何获取当前文件?

<el-image :preview-src-list="previewSrcList">
elementUI的图片组件,使用大图预览功能,有多个图片翻页查看时,如何获取当前显示的文件呢?
想要实现的功能是,翻到对应的图片可以点击下载,目前只能拿到点击打开大图的文件,上下翻页后如何获取当前文件呢?有没有翻页对应的事件?
image.png

阅读 4.2k
2 个回答

拿不到,image-viewer只暴露了on-close

---------更新-------
用下面老哥的方式也可以,但是记得设置babel转换代码

// vue.config.js
module.exports = {
  // 用到了imageViewer组件,只能在package中引入,所以需要babel转换
  transpileDependencies: [
    /[/\\]node_modules[/\\]element-ui[/\\]packages[/\\]/,
    /[/\\]node_modules[/\\]element-ui[/\\]src[/\\]/,
  ],
}

你可以使用image-viewer,这个组件el没有写进文档里,
看源码提供了onSwitchonClose的方法,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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题