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

  • Z时代
  • 2024-03-05
  • 分类：IT

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

回答：

拿不到，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没有写进文档里，
看源码提供了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>

以上是 element图片预览组件如何获取当前文件？ 的全部内容， 来源链接： utcz.com/p/936494.html

回到顶部