el-image-viewer 图片预览组件

Element Ui为el-image组件带了图片预览功能，只需添加参数:preview-src-list="srcList"即可实现，但灵活性欠缺。

比如我的项目中要为每个el-image元素实现左键点击选中，因为图片预览功能默认是鼠标左键，冲突了。

使用方法：

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

components : { ElImageViewer }

<el-image-viewer

     v-if="showViewer"

     :on-close="closeViewer"

     :url-list="viewerUrlList" />

// 必须用v-if，如用v-show会出现二次打开后键盘事件无法触发（个人猜测焦点问题，还需看源码才能确认）

// 每次colseViewer时如将 viewerUrlList=[] 会报错。

当预览一些列图片的时候，如何保证点击的那个图出现在预览界面的第一个呢？

<el-image class="imgBlock"

               v-for="(url, index) in urls"

               :key="index"

               :src="url"

               fit="contain"

               lazy

               @contextmenu.prevent="openImgViewer(index)"> // 此处可以获取到index

methods:{

   openImgViewer(index){

       // 将index的那个图片放在第一位

       this.viewerUrlList=this.urls.slice(index).concat(this.urls.slice(0, index))

       // 显示预览组件

       this.showViewer = true

   }

}

本文章由javascript技术分享原创和收集