【物以类聚】给el-image预览多张图片增加提示文字，让每张图片有所分类

一、需求

点击地图上的一张图片，弹出所有相关的图片资源，图片资源上显示每个图片的所属类型。

二、el-image

整个项目基于element-ui框架，调研后发现el-image组件大体适用，唯一不足的是缺少照片名称元素。

第一想法是修改依赖包中的文件，复用该组件，发现修改无效，原因是element-ui package中的文件是编译后的包，如果要改动，就需要重新编译¹。

第二想法，继承复用该组件，不属于包含关系，无法修改内部的元素，需求和这个想法不一致，遂改变。

和同事交流后，得出第三个想法，直接COPY框架的el-image组件文件到自己的项目中，在项目中直接引用。终见光明。

三、实施步骤

3.1 导包

将图片组件整体的文件导进来。

3.2 改造

修改elImageViewer组件。增加绝对布局组件。

修改urlList为对象数组，即
[ {name: '照片'，url: ''} ]

3.3 引入

 <my-image ref="preview"
      style="width: 5px; height: 5px;position: absolute;top:0;right:0"
      :preview-src-list="srcList">
 my-image>

import MyImage from '@/components/ELImage/index'

三、效果

可以看到居中显示的图片类型文字。

---

1. 超完整版修改element ui源码的3种方式！！以及patch-package打补丁 ↩︎