Vue element之el-upload 图片上传、回显、预览二次封装

<template>
    <div class="igmBox">
        <ul class="imgList" v-if="isLook">
            <li v-for="(item,index) in dataList" :key="index" class="img-item" @click="viewImage(item)">
                <img :src="item">
            </li>
        </ul>
        <ul class="imgList" v-else>
            <li class="img-item" v-for="(item,index) in dataList" :key="index" @mouseleave="leave(item)" @mouseenter="enter(item)">
                <div class="hoverImg" v-show="item == hoverImg">
                    <i class="el-icon-zoom-in" @click="viewImage(item)"></i>
                    <i class="el-icon-delete" @click="handleRemove(item)"></i>
                </div>
                <div>
                    <img :src="item">
                </div>
            </li>
        </ul>
        <el-upload :action="actionUrl" list-type="picture-card" :auto-upload="true" :show-file-list="false" :on-success='uploadSuccess' :class="{'hidd':isImgVisible}" v-if="!isLook">
            <!-- <i slot="default" class="el-icon-plus"></i> -->
            <span class="el-upload-title">上传图片</span>
        </el-upload>

        <!-- 图片预览 vue3 关闭按钮 方法 @close='closeViewer' -->
        <el-image-viewer v-if="showViewer" :z-index='9999' :on-close="()=>{showViewer=false}" :url-list="srcList" class="image-viewer" />
    </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
    name: 'UniAddImg',
    data() {
        return {
            showViewer: false,
            srcList: [],
            dataList: [],
            isImgVisible: false,
            hoverImg: '',
            actionUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/upload?access_token=${Cookies.get('access_token')}`,
        }
    },
    components: {
        'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    props: {
        imgList: { // 编辑回显
            type: String,
            default: '',
            required: false
        },
        isLook: {  // 是否是查看
            type: Boolean,
            default: false,
            required: false
        },
        limit: {  // 最大上传图片数量
            type: Number,
            default: 1,
            required: false
        },
    },
    created() {

    },
    methods: {
        // 预览图片的方法
        viewImage(item) {
            if (!item) {
                this.$message.warning('暂无可查看的照片！')
                return
            }
            this.srcList = [item]
            this.showViewer = true;
        },
        leave(val) {
            this.hoverImg = ''
        },
        enter(val) {
            this.hoverImg = val
        },
        // 删除
        handleRemove(val) {
            this.dataList = this.dataList.filter(item => item !== val)
            if (this.dataList.length < this.limit) {
                this.isImgVisible = false
            }
        },
        // 上传成功的回调
        uploadSuccess(response, file, fileList) {
            if (response.code === 0 && response.msg === 'success') {
                this.dataList.push(response.data.url)
            }
            if (this.dataList.length >= this.limit) {
                this.isImgVisible = true
            }
        },
    },
    watch: {
        dataList: {
            handler(val) {
                this.$emit('input', val.join(','))
            },
            deep: true,
            immediate: true
        },
        imgList: {
            handler(val) {
                if (val) {
                    this.dataList = val.split(',')
                    if (this.isLook) {
                        this.isImgVisible = true
                    } else {
                        if (this.dataList.length >= this.limit) {
                            this.isImgVisible = true
                        } else {
                            this.isImgVisible = false
                        }
                    }
                } else {
                    this.dataList = []
                    if (this.isLook) {
                        this.isImgVisible = true
                    } else {
                        this.isImgVisible = false
                    }
                }
            },
            deep: true,
            immediate: true
        },

    }
}
</script>

<style scoped lang='scss'>
.igmBox {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    .imgList {
        display: flex;
        height: 130px;
        .img-item {
            height: 130px;
            margin-right: 10px;
            position: relative;
            img {
                height: 130px;
            }
            color: #fff;
            .hoverImg {
                height: 100%;
                width: 100%;
                background: rgba(96, 98, 102, 0.5);
                text-align: center;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                .el-icon-zoom-in {
                    height: 100%;
                    flex: 1;
                    line-height: 130px;
                    font-size: 20px;
                }
                .el-icon-delete {
                    height: 100%;
                    flex: 1;
                    line-height: 130px;
                    font-size: 20px;
                }
            }
        }
    }
    .hidd {
        display: none;
    }
}
</style>
<style lang="scss">
.igmBox .el-upload {
    width: 130px;
    height: 130px;
    position: relative;
    .el-upload-title {
        color: #777b85;
        font-size: 14px;
        display: inline-block;
        line-height: 130px;
    }
}
.igmBox .el-icon-plus {
    line-height: 130px;
    text-align: center;
    position: absolute;
    top: -10px;
    left: 35px;
}
</style>