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 
    }
}