element-ui 图片预览切换查看

好久没记录问题了，今天记录一下在element-ui现在版本中如果需要查看的话，根据api的要求写的太多
处理起来相对麻烦，所以在这里就不写处理结果，可以直接看element-ui-plus

给出组件el-image-viewer但是因为这只是vue3.0适配的，但是vue现阶段比较稳定的是2.6几版本，所以用element-ui-plus并不能使用，但是也在element-ui中添加了这一组件是需要单独引入

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

然后就是直接使用

<el-image-viewer
              :on-close="closeViewer"
              v-if="centerDialogVisible"
              :url-list="newFilesUrl"
              :hide-on-click-modal="true"
              :initial-index="firstUrl"
            ></el-image-viewer>

这就省去了我们大量的反复操作
newFilesUrl是一个url的数组
hide-on-click-modal 是否可以通过点击遮罩层关闭预览
initial-index 预览的首张图片的位置, 小于等于数组长度
我们在搭配在这个组件外层的点击事件，来传值，根据点击索引位置，弹出相应的图片

<a
              v-for="(item, index) in workOrderInfo.files_url"
              :key="index"
              @click="handleCenterDialogVisible(item,index)"
              target="_blank"
            >

    // 图片预览
    handleCenterDialogVisible(item,index) {
      this.firstUrl = index
      this.centerDialogVisible = true
    }

这个时候的效果实现如图

本文链接：嘿嘿
博主个人小博客：嘿嘿