图片大屏显示 vue组件封装

效果图:

组件代码:

<template>
    <div class="ImageBig">
        <img :src="url" alt="">
    </div>
</template>

<script>
/*

图片大屏显示 ：
传入 url 图片地址

最大显示尺寸 可视窗口的 80%  

*/
export default {
    name: "DemoImageBig",
    props: {
        url: {
            type: String,
            require: true,
        },
    },
    data() {
        return {};
    },

    mounted() {},

    methods: {},
};
</script>

<style lang="scss" scoped>
.ImageBig {
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    background-color: rgba(51, 51, 51, 0.2);

    img {
        max-width: 80vh;
        max-height: 80vh;
    }
}
</style>

组件调用：

   <ImageBig v-if="url" :url="url"></ImageBig>
    // 只有有值的时候才进行大屏显示