show1.jpg

el-image的不足

el-image 本身设计已非常优秀，但图片预览功能存在以下不足：

1.没有相应的用户反馈，用户无法直观的知道该图片可以点击查看详情；

2.预览图片的列表需要单独配置一个数组，在实际开发中往往是需要查看当前图片；

show2.png

调用效果及代码

基于上述问题，新增用户交互反馈，支持单图、多图预览

show3.gif

<!--
 * @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>

代码仓库

后续补充