基于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);
        }
    }
}

代码仓库

后续补充