我一人全干！之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;
}
}
// 防止组件销毁后还执行设置状态s
Object.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">
<ViewHead
title="数据可视化大屏展示"></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>
好了，一个用transfor缩放的例子就完成了，使用rem的例子以后为大家讲解
源码
DEMO