el-image的有余
el-image 自身设计已十分优良，但图片预览性能存在以下有余：
1.没有相应的用户反馈，用户无奈直观的晓得该图片能够点击查看详情；
2.预览图片的列表须要独自配置一个数组，在理论开发中往往是须要查看以后图片；
调用成果及代码
基于上述问题，新增用户交互反馈，反对单图、多图预览
<!-- * @Date: 2022-05-16 10:03:11 * @Author: surewinT 840325271@qq.com * @LastEditTime: 2022-05-16 11:00:07 * @LastEditors: surewinT 840325271@qq.com * @Description: 调用页面--><template> <div class=""> <p-el-image v-for="(item, index) in imglist" :key="index" :src="item.path" width="200px" height="200px" /> </div></template><script>import PElImage from '@/components/p-el-image';export default { components: { 'p-el-image': PElImage, }, props: [], data() { return { imglist: [ { id: 1, path: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', }, { id: 2, path: [ 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', ], }, ], }; }, mounted() {}, watch: {}, methods: {},};</script><style lang='scss' scoped></style>组件源码（p-el-image）
<!-- * @Date: 2022-02-28 21:26:54 * @Author: surewinT 840325271@qq.com * @LastEditTime: 2022-05-16 11:00:18 * @LastEditors: surewinT 840325271@qq.com * @Description: 图片预览组件--><template> <span class="image-item" :style="{ width: width, height: height, }" > <span class="warp" @click="showImage"> <span class="el-icon-view"></span> </span> <el-image ref="Image" class="image" :src="imgSrc" :preview-src-list="previewSrc" ></el-image> </span></template><script>export default { components: {}, props: { src: [Array, String], width: { typeof: String, default: '100px', }, height: { typeof: String, default: '100px', }, }, data() { return { srcList: [], baseurl: '', }; }, mounted() {}, watch: {}, computed: { imgSrc() { if (typeof this.src == 'string') { return this.src; } else { return this.src[0]; } }, previewSrc() { if (typeof this.src == 'string') { return [this.src]; } else { return this.src; } }, }, methods: { // 显示图片 showImage() { this.$refs.Image.clickHandler(); this.$emit('image-show', this.src); }, },};</script><style lang='scss' scoped>.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); } }}</style>代码仓库
后续补充