我一人全干！之vue3后台管理中的大屏展示。

使用大屏展示的时候有很多种场景，众多场景都是为了实现大屏自适应。
大屏，顾名思义，就是放在一个固定的屏幕上看的，即使你不做自适应，放在一个固定的屏幕上看也没啥问题，但是很多做大屏的是为了在PC端看，PC端屏幕又是参差不齐的，所以需要做自适应。
毒蘑菇后台管理

方案一：
使用transform的大小缩放来实现，我们先写一个缩放容器AutoScalContainer.vue，代码如下：

<template><div class="auto-scal-container"ref="AutoScalContainerRef"><div ref="DomRef" class="auto-scal-container-inner"><slot></slot></div></div>
</template><script>
/** * 自动缩放容器* 使用transform进行缩放*  */
import { defineComponent,ref,getCurrentInstance,reactive,toRef, computed,onMounted,onActivated,watch,onBeforeUnmount,
} from "vue";export default defineComponent({props:{width:{type:Number,default:1920,},height:{type:Number,default:1080,},/** 内部容器的宽高比例 */ratio:{type:Number,default:1920 / 1080,},/** * fit，原理同img的object-fit* contain : 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。* cover : 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。*  */fit:{type:String,default:'contain',},},emits:['onResizeScreen'],setup(props,{emit}){const DomRef = ref(null);  //组件实例const AutoScalContainerRef = ref(null);  //组件实例const dataContainer = reactive({height:toRef(props,'height'),width:toRef(props,'width'),ratio:toRef(props,'ratio'),fit:toRef(props,'fit'),});/** 是否是文档上 */function isActive(){if(!DomRef.value) return false;return DomRef.value.getRootNode() === document;}/** 自动缩放 */function autoResizeScreen(){if(!AutoScalContainerRef.value) return;if(!DomRef.value) return;if(!isActive) return;let rect = AutoScalContainerRef.value.getBoundingClientRect();let clientWidth = rect.width;let clientHeight = rect.height;var width = dataContainer.width;var height = dataContainer.height;let left = 0;let top = 0;let scale = 0;/** 使用外部传入的比例或者传入的宽高计算比例 */let ratio = dataContainer.ratio || (width / height);// 获取比例  可视化区域的宽高比与 屏幕的宽高比  来进行对应屏幕的缩放if(dataContainer.fit == 'contain'){if ((clientWidth / clientHeight) > ratio) {scale = clientHeight / height;top = 0;left = (clientWidth - width * scale) / 2;} else {scale = clientWidth / width;left = 0;top = (clientHeight - height * scale) / 2;}}if(dataContainer.fit == 'cover'){if ((clientWidth / clientHeight) > ratio) {scale = clientWidth / width;} else {scale = clientHeight / height;}}// 防止组件销毁后还执行设置状态sObject.assign(DomRef.value.style, {transform: `scale(${scale})`,left: `${left}px`,top: `${top}px`,});/** 向外部通知已经计算缩放 */emit('onResizeScreen');}/** 防抖 */let timer_1;function fnContainer(){clearTimeout(timer_1);// timer_1 = setTimeout(()=>{autoResizeScreen();// },16);}let timer = setInterval(()=>{fnContainer();},300);onMounted(() => {autoResizeScreen();});window.addEventListener('resize', fnContainer);onBeforeUnmount(() => {window.removeEventListener('resize', fnContainer);window.clearInterval(timer);});return {dataContainer,DomRef,AutoScalContainerRef,};},
});
</script><style lang="scss" scoped>
.auto-scal-container {width: 100%;height: 100%;position: relative;overflow: auto;/** 隐藏滚动条 */-ms-overflow-style: none;scrollbar-width: none;&::-webkit-scrollbar {display: none;}>.auto-scal-container-inner {overflow: hidden;transform-origin: left top;z-index: 999;width: max-content;height: max-content;position: absolute;top: 0;left: 0;}
}
</style>

使用方式

<script>
/** * 大屏主页面* 采用缩放的形式进行适配，搭配rem的话很方便实用*  */
import { defineComponent,ref,getCurrentInstance,reactive,toRef, computed,onMounted,onActivated,watch } from "vue";
import AutoScalContainer from "@/components/AutoScalContainer.vue";
import ViewHead from "./components/ViewHead.vue";
import img_1 from "./assets/bg.png";
import img_2 from "./assets/1-1-bg.png";
import Box_1 from "./components/Box_1.vue";
import Box_2 from "./components/Box_2.vue";
import Box_3 from "./components/Box_3.vue";
import Box_4 from "./components/Box_4.vue";
import Box_5 from "./components/Box_5.vue";
import Box_6 from "./components/Box_6.vue";
import { useRoute } from "vue-router";export default defineComponent({name:'BigScreenView',components: {AutoScalContainer,ViewHead,Box_1,Box_2,Box_3,Box_4,Box_5,Box_6,},setup(){let route = useRoute();const dataContainer = reactive({loading:false,img:{img_1,img_2,},fit:'contain',}); watch(route,()=>{let queryParams = route.query || {};let fitMap = {'cover':'cover','contain':'contain',};dataContainer.fit = fitMap[queryParams.fit] || 'contain';},{immediate:true,});return {dataContainer,};},
});
</script><template><div class="big-screen-view"><AutoScalContainer:height="1080":width="1920":fit="dataContainer.fit"><div class="big-screen-view-container":style="{'--bg-img-1':`url(${dataContainer.img.img_1})`,'--bg-img-2':`url(${dataContainer.img.img_2})`,}" ><div class="head"><ViewHeadtitle="数据可视化大屏展示"></ViewHead></div><div class="content"><div class="top"><Box_1></Box_1> </div><div class="content"><div class="left"><div class="box"><Box_2></Box_2> </div><div class="box"><Box_3></Box_3> </div></div><div class="right"><div class="box"><Box_4></Box_4> </div><div class="box"><Box_5></Box_5> </div></div></div></div><div class="centre-box"><div class="v-height"></div><div class="container"><Box_6></Box_6> </div></div></div></AutoScalContainer></div>
</template><style lang="scss" scoped>
.big-screen-view{width: 100vw;height: 100vh;overflow: hidden;background-color: #031045c7;.big-screen-view-container{width: 1920px;height: 1080px;background-color: rgb(169, 169, 169);display: flex;flex-direction: column;background-image: var(--bg-img-1);background-repeat: no-repeat;background-size: 100% 100%;background-position: center;position: relative;>.head{height: 91px;position: relative;z-index: 2;}>.content{display: flex;flex-direction: column;flex: 1 1 0;width: 100%;height: 0;position: relative;z-index: 2;pointer-events: none;>.top{width: 100%;height: 199px;pointer-events: initial;}>.content{display: flex;flex-direction: row;justify-content: space-between;flex: 1 1 0;width: 100%;height: 0;padding: 0 15px 15px 15px;box-sizing: border-box;>.left,>.right{display: flex;flex-direction: column;>.box{width: 100%;flex: 1 1 0;height: 0;background-image: var(--bg-img-2);background-repeat: no-repeat;background-size: 100% 100%;background-position: center;margin: 0 0 15px 0;pointer-events: initial;&:last-child{margin: 0;}}}>.left{height: 100%;width: 550px;}>.right{height: 100%;width: 550px;}}}>.centre-box{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;display: flex;flex-direction: column;>.v-height{width: 100%;height: 270px;}>.container{flex: 1 1 0;height: 0;width: 100%;}}}
}
</style>