wanda-bm-guide/src/components/PicLarge/src/picLarge.vue

/**
*@author:Guoxiaohuan
*@date:2020.05.28
*@info：大图预览
*/
<template>
    <div class='tpyl'>
        <el-dialog title='图片预览' class='tpyl-1' width='90%' :visible.sync='dialogVisible' :close-on-click-modal='false' append-to-body>
            <div class='pic-list'>
                <div class='pic-left'>
                    <ul v-for='(item,index) in imgUrl' :key='index'>
                        <li @click='getIndex(item.url)'>
                            <img :src='item.url' />
                        </li>
                        <!-- <span>{{item.name}}</span> -->
                    </ul>
                </div>
                <div class='pic-right'>
                    <div class='pic-right-img'>
                        <img :src='ImgUrl' />
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'PicLarge',
    props: ['imgUrl'],
    data() {
        return {
            dialogVisible: false,
            ImgUrl: ''
        }
    },
    methods: {
        open() {
            this.dialogVisible = true
        },
        getIndex(imgUrl) {
            this.ImgUrl = imgUrl
        }
    },
    computed: {
        __imgUrl() {
            return this.imgUrl
        }
    },
    watch: {
        __imgUrl: {
            handler(newV, oldV) {
                newV.length && (this.ImgUrl = this.imgUrl[0].url)
            },
            deep: true
        }
    }
}
</script>
<style lang="less" scoped>
.pic-list {
    width: 100%;
    // height: 700px;
    display: flex;
    justify-content: space-between;
    .pic-left {
        width: 230px;
        background: #ffffff;
        overflow: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        ul {
            margin-bottom: 0;
            width: 180px;
            margin: 0 auto;
            li {
                width: 180px;
                height: 135px;
                border-radius: 4px;
                border: 4px solid rgba(245, 246, 247, 1);
                img {
                    max-width: 100%;
                    max-height: 100%;
                    display: block;
                    margin: auto;
                    border-radius: 4px;
                }
            }
            span {
                height: 16px;
                font-size: 12px;
                font-family: MicrosoftYaHei;
                color: rgba(31, 36, 41, 1);
                line-height: 16px;
                display: flex;
                justify-content: center;
                margin-top: 12px;
                margin-bottom: 20px;
            }
        }
    }
    .pic-right {
        flex: 1;
        background: rgba(245, 246, 247, 1);
        border-radius: 0px 0px 4px 0px;
        padding: 60px 50px;
        margin: auto auto;
        display: flex;
        justify-content: center;
        align-items: center;
        .pic-right-img {
            width: 720px;
            height: 540px;
            text-align: center;
            img {
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: auto;
            }
        }
    }
}
</style>
<style lang="less">
.tpyl-1 {
    overflow: hidden;
    .el-dialog {
        height: 90vh !important;
        margin-top: 5vh !important;
        .el-dialog__body {
            padding: 10px;
        }
    }
}
</style>