当前位置: 首页 > Web前端 > HTML

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

时间:2023-03-29 11:27:13 HTML

el-image的不足el-image本身的设计很好,但是图片预览功能有以下不足:1.没有相应的用户反馈,用户不能直观的知道图片可以点击查看详情;2.预览图片列表需要分开配置一个数组,在实际开发中往往需要查看当前图片;调用效果和代码基于以上问题,增加用户交互反馈,支持单图和多图预览组件源代码(p-el-image).image-item{//宽度:100px;//高度:100像素;位置:相对;显示:内联块;光标:指针;&+.image-item{margin-left:10px;}.image{宽度:100%;高度:100%;}.warp{位置:绝对;宽度:100%;高度:100%;显示:弹性;证明内容:居中;对齐项目:居中;颜色:#fff;}&:hover{.warp{z-index:1;背景色:rgba(0,0,0,0.7);}}}代号库后继续补充