持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
需求是在vue项目中实现一个点击按钮展示图片预览的操作（图片查看器），主要应用场景在表格的行来点击按钮展示，查询了官方文档发现里面只是点击图片预览图片的功能，不能满足当前的需求。
方案：
- 可以使用viewer.js插件来实现，如果对于预览之后的具体功能有要求（上一张 下一张 放大 缩小等），可以使用插件来进一步实现。
- 基于现有的进行改造。
因为使用的是elementUI，本着方便快捷的方式在node_modules中找到了elementUI对于图片查看器的封装，文件位置：node_modules/element-ui/packages/image/src/image-viewer.vue
实现的功能点根据代码里面的注释可以看得很清楚：
包括：关闭按钮、箭头（上一张/下一张）、操作、预览界面的源码
如何去使用<el-image-viewer>，来看看组件中参数传递这部分的定义：
其中urlList、onClose是必须要传入的，urlList：表示所有展示的图片路径列表，数组，onClose：表示关闭预览的事件，函数。
有几点注意事项（避坑）：
-
引入组件：
import elImageViewer from 'element-ui/packages/image/src/image-viewer' -
在引入组件的时候，urlList、onClose驼峰的写法要改写成:url-list=""、:on-close=""，否则无法识别
-
on-close关闭事件中可能有时会习惯性的写:on-close="showViewer=false"，如果写成这种形式会出现问题，应写成箭头函数形式:on-close="()=>{}"，或者定义在methods中
-
url-list的值为数组形式，当只有一个文件的时候（比如展示表格中某一行的图片），也要写成数组形式：:url-list="[]"
-
加入无预览数据的判断
核心代码如下：
<el-table-column label="查看图片">
<template slot-scope="{ row }">
<el-image-viewer v-if="showViewer" :url-list="[row.file_url]" :on-close="()=>{showViewer=false}" />
<el-button v-if="row.file_url" type="text" size="small" @click="showViewer=true">查看</el-button>
<span v-if="!row.file_url" >暂无</span>
</template>
</el-table-column>
