show1.jpg

el-image的不足

el-image 本身設(shè)計(jì)已非常優(yōu)秀诽嘉，但圖片預(yù)覽功能存在以下不足：

1.沒有相應(yīng)的用戶反饋，用戶無法直觀的知道該圖片可以點(diǎn)擊查看詳情击蹲；

2.預(yù)覽圖片的列表需要單獨(dú)配置一個(gè)數(shù)組要尔，在實(shí)際開發(fā)中往往是需要查看當(dāng)前圖片；

show2.png

調(diào)用效果及代碼

基于上述問題妙色，新增用戶交互反饋桅滋，支持單圖、多圖預(yù)覽

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: 調(diào)用頁(yè)面
-->

<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: 圖片預(yù)覽組件
-->

<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>

代碼倉(cāng)庫(kù)

后續(xù)補(bǔ)充