qimall/backend/views/components/common/com-select-image.php

<template id="com-select-image">
    <div class="com-select-image">
        <div class="mask"  v-for="(item, index) in select_images">
            <el-image :style="elStyle" :src="item" fit="fit"></el-image>
            <div class="mask-operate">
                <i class="el-icon-zoom-in" @click="showViews(index)"></i>
                <i class="el-icon-delete" @click="deleteImg(index)"></i>
            </div>
        </div>

        <com-attachment :multiple="multiple" :max="max" type="images" @selected="addImage($event)">
            <el-tooltip class="item" effect="dark" :content="'注意：最多可上传'+ max +'张图片'" placement="top">
                <div class="select-picture" :style="elStyle">
                    <i class="el-icon-plus"></i>
                </div>
            </el-tooltip>
        </com-attachment>

        <!-- 预览 -->
        <el-image src="/resources/img/admin/show.png" v-show="false" ref="preview" :initial-index="initial_index" :preview-src-list="select_images"></el-image>
    </div>
</template>
<script>
    Vue.component('com-select-image', {
        template: '#com-select-image',
        props: {
            images_list: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            set_size: {
                type: Number,
                default: () => {
                    return 150
                }
            },
            max: {
                type: Number,
                default: 10,
            },
            multiple: {
                type: Boolean,
                default: true,
            }
        },
        data() {
            return {
                initial_index: 0,
                select_images: [],
                elStyle:'width: 150px; height: 150px;',
            };
        },
        created() {
            this.select_images = this.images_list
            if (this.set_size != 150) {
                let tem_size = this.set_size.toString()
                this.elStyle = 'width: '+ tem_size +'px; height: '+ tem_size +'px;'
            }
        },
        computed: {
        },
        methods: {
            //删除商品
            deleteImg(index) {
                this.select_images.splice(index, 1);
            },
            addImage(event) {
                if (this.select_images.length >= this.max) {
                    this.$message.error('最多只能上传'+this.max+'张图片哦');
                    return;
                }
                let imgs = []
                event.forEach(function (item, index) {
                    imgs.push(item['url'])
                })
                this.select_images = this.select_images.concat(imgs)
                this.$emit('selected', this.select_images);
            },
            showViews(index) {
                this.initial_index = index
                this.$refs.preview.clickHandler();
            }
        },
    });
</script>
<style>
    .select-picture {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        font-size: 28px;
        text-align: center;
        color: #8c939d;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .mask {
        position: relative;
        margin: 0px 10px 10px 0;
        float: left;
        line-height: 0px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .mask img {
        display: block;
        width: 100%;
    }
    .mask:before .mask-operate {
        display: none;
    }
    .mask:hover .mask-operate {
        display:flex;
        align-items: center;
        justify-content: center;
        opacity: 0.5;
    }
    .mask-operate {
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-align: center;
        width: 100%;
        height: 100%;
        background-color: #333333;
        display: none;
    }
    .mask-operate i {
        cursor: pointer;
        margin: 0 10%;
        font-size: 20px;
    }
</style>