共计 3513 个字符，预计需要花费 9 分钟才能阅读完成。
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>代码仓库
后续补充
正文完
