新建组件FullContainer
<template>
<div ref="container" id="fullContainer">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'FullContainer',
mounted() {
this.initSize();
window.addEventListener('resize', this.setScale);
},
beforeDestroy() {
this.recoverSize();
window.removeEventListener('resize', this.setScale);
},
methods: {
setScale() {
const dom = this.$refs.container;
const { innerWidth, innerHeight } = window;
this.scaleX = innerWidth / 1920;
this.scaleY = innerHeight / 1080;
dom.style.transform = `scaleX(${this.scaleX}) scaleY(${this.scaleY})`;
},
initSize() {
document.documentElement.style.overflow = 'hidden';
this.setScale();
},
recoverSize() {
document.body.style.overflow = 'visible';
document.documentElement.style.overflow = 'visible';
}
}
}
</script>
<style lang="less" scoped>
#fullContainer {
width: 1920px;
height: 1080px;
transform: scale(1, 1);
transform-origin: 0 0;
// background-image: url('~@/assets/xxxxx');
background-size: 105% 105%;
background-position: center center;
}
</style>
使用组件
<template>
<FullContainer>
<template>
<div class="main">
大屏内容
</div>
</template>
</FullContainer>
</template>
<script>
import FullContainer from "@/xxxxx"
export default {
components: {
FullContainer
},
}
</script>
<style lang="less" scoped>
.main {
width: 100%;
height: 100%
}
</style>