vue+element单张图片放大/删除

html

                        <el-upload
                            class="avatar-uploader"
                            :headers="headerObj"
                            :action="url + '******'"
                            :on-success="imgSuccess"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :show-file-list="false" 
                            :disabled="uploadBoolean1"
                            >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:150px;height:150px">
                            
                            <div v-else>
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                            <span v-if="imageUrl" class="el-upload-list__item-actions">
                                <span class="upload-icon">
                                    <span class="el-uploads-span"  style="margin-right: 10px;cursor: pointer;" @click="handlePreview">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span class="el-upload-span"  style="cursor: pointer;" @click="handleRemove">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </span>
                        </el-upload>

js：

data() {
        return {
            imageUrl: '',
            url:'',
            headerObj: {
                Authorization: localStorage.getItem('accessToken')
            },
            personPic:{
                fileType:'0',
            },
            uploadBoolean1:false
        } 
    },

handlePreview() {
            this.uploadBoolean1= true
            const image = new Image();
            image.src = this.imageUrl;
            image.onload = () => {
                // 创建弹出层
                const previewContainer = document.createElement('div');
                previewContainer.style.position = 'fixed';
                previewContainer.style.top = 0;
                previewContainer.style.bottom = 0;
                previewContainer.style.left = 0;
                previewContainer.style.right = 0;
                previewContainer.style.backgroundColor = 'rgba(0,0,0,0.8)';
                previewContainer.style.display = 'flex';
                previewContainer.style.justifyContent = 'center';
                previewContainer.style.alignItems = 'center';
                //图层位置:
                previewContainer.style.zIndex = '9999';
                document.body.appendChild(previewContainer);
                // 在弹出层中添加图片
                const previewImage = document.createElement('img');
                previewImage.src = this.imageUrl;
                previewImage.style.maxWidth = '80%';
                previewImage.style.maxHeight = '80%';
                previewContainer.appendChild(previewImage);
                // 点击弹出层，关闭预览
                previewContainer.addEventListener('click', () => {
                    document.body.removeChild(previewContainer);
                });
            };
        },
        handleRemove(){
            this.imageUrl =''
            this.uploadBoolean1= false
        },
        imgSuccess(res, file) {
            this.personPic.url = res.data 
            this.imageUrl = URL.createObjectURL(file.raw)
        },

css

.upload-icon {
    position: absolute;
    top: 50%;
    margin-left: -28px;
    margin-top: -18px;
}
.el-upload-list__item-actions:hover span {
    display: inline-block;
}
.el-upload-list__item-actions:hover {
    opacity: 1;
}
.el-upload-list__item-actions {
    position: absolute;
    width: 150px;
    height: 150px;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
}
    .avatar-uploader-icon {
    border: 1px dashed #B6BFDB!important;
    font-size: 38px;
    color: #8E8E8E;
    width: 150px;
    height: 150px;
    text-align: center;
    padding-top: 55px;
}