wanda-bm-guide/src/views/overview/picModal.vue

<template>
    <div class='picDia'>
        <el-dialog :visible.sync='dialogVisible' width='75%' :close-on-click-modal='false' :show-close='false'>
            <pic-view-rotation
                :picType='picType'
                :size='sizePic'
                :key='key'
                v-if='rotationImg.length>0'
                :rotationImg='rotationImg'
                style='height:100%;width:100%'
            ></pic-view-rotation>
            <span class='close' @click='close'>X</span>
        </el-dialog>
    </div>
</template>

<script>
/**
 * @author  yunxing
 * @date    2020-09-07
 * @description fix: 修复放大预览图片时,会出现蓝色头部的问题
 */
import PicViewRotation from './picViewRotation'
export default {
    data() {
        return {
            dialogVisible: false,
            mode: 'top',
            rotationImg: [], //要展示的大图
            picType: null, //图片类型  1 区位图 2 鸟瞰图
            key: 1,
            sizePic: '', //横向||纵向展示 width 横向展示 height 纵向展示
            imgInfo: {}, //返回图片信息
        }
    },
    methods: {
        showModal(params, type) {
            // debugger
            this.key++
            this.dialogVisible = true
            this.rotationImg = params
            this.picType = type
            if (this.rotationImg.length > 0) {
                let img = new Image()
                img.src = this.rotationImg[0].url
                const vm = this
                img.onload = function () {
                    vm.$set(vm.imgInfo, 'width', img.width)
                    vm.$set(vm.imgInfo, 'height', img.height)
                    if (vm.imgInfo.width > vm.imgInfo.height) {
                        vm.sizePic = 'width'
                    } else {
                        vm.sizePic = 'height'
                    }
                }
            }
        },
        close() {
            this.dialogVisible = false
        },
    },
    components: {
        PicViewRotation,
    },
}
</script>

<style lang="less" scoped>
.picDia {
    img {
        width: 100%;
        height: 100%;
    }
}
.close {
    display: block;
    position: absolute;
    right: -40px;
    font-size: 20px;
    color: #fff;
    top: -30px;
    z-index: 10;
    cursor: pointer;
}
</style>
<style lang='less'>
.picDia {
    .el-dialog {
        height: 88%;
        margin-top: 5vh !important;
        position: relative;
        .el-dialog__header {
            padding: 0;// !important;
            height: 0;
            background: none; //!important;
            border-bottom: none;
        }
        .el-dialog__body {
            padding: 0;
            height: 100%;
        }
    }
}
</style>