效果图:
组件代码:
<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>
// 只有有值的时候才进行大屏显示