基于el-image，封装一个图片预览组件基于el-image，封装一个图片预览

el-image的不足 el-image 本身设计已非常优秀，但图片预览功能存在以下不足：
1.没有相应的用户反馈，用户无法直观的知道该图片可以点击查看详情；
2.预览图片的列表需要单独配置一个数组，在实际开发中往往是需要查看当前图片；

文章图片

调用效果及代码基于上述问题，新增用户交互反馈，支持单图、多图预览

组件源码（p-el-image）

.image-item { // width: 100px; // height: 100px; position: relative; display: inline-block; cursor: pointer; & + .image-item { margin-left: 10px; } .image { width: 100%; height: 100%; } .warp { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; } &:hover { .warp { z-index: 1; background-color: rgba(0, 0, 0, 0.7); } } }

代码仓库 【基于el-image，封装一个图片预览组件】后续补充