Vue大屏数据展示示例
时间：2023-01-01 12:42:52 | 栏目：vue | 点击：次
高效实现需求，避免臃肿的组件库和重复造轮子，前段时间做了很多大屏展示类的项目，今天来跟大家分享一下，大屏的实践过程，最开始我是使用了dataview 这个组件库，然后发现是自己并不需要它太多的封装好的组件，而且在移动端，有样式错乱的问题。所以自己看了他的实现方式，搞了一个大屏自适应的组件。话不多说，直接上效果图：
效果图
需要适配所有尺寸的大型显示屏，并且在手机上，可以缩放查看效果。我这里添加了这样一段代码，通过缩放body的大小，进行等比例放大缩小，达到不变形，整体适配的效果。
<script>
//页面缩放公共
function resizePage() {
// 获取window的高度
var clientW = window.innerWidth
var clientH = window.innerHeight
// 初始window与body的比值
var bi = clientW / 1920
// 设置body的宽高-可根据实际情况进行调节
document.getElementsByTagName('body')[0].style.width = "1920px"
document.getElementsByTagName('body')[0].style.height = "1080px"
document.getElementsByTagName('body')[0].style.transform ='scale(' + bi + ',' + bi + ')'
document.getElementsByTagName('body')[0].style.transformOrigin ='left top 0'
}
resizePage()
// resizePage();
window.onresize = function () {
setTimeout(()=>{
resizePage();
},200)
}
</script>
代码实现：
封装一个适配的大的组件，可以设大屏的背景图和整体效果。其他的基本都是使用的echart的组件库，因没有什么特别的定制的需求图标。所以也没有做太多的个性化操作
<template>
<div id="dv-full-screen-container">
<template >
<slot></slot>
</template>
</div>
</template>
<script>
export default {
mounted(){
}
}
</script>
<style lang="less">
#dv-full-screen-container {
position: fixed;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: left top;
z-index: 999;
width:100%;
height:1080pxee
}
</style>
<template>
<div class="full">
<dv-full-screen-container ref="full">
content
</dv-full-screen-container>
</div>
</template>
<script>
import fullScreenContainer from './fullscreen'
export default {
components:{
'dv-full-screen-container':fullScreenContainer
},
mounted(){
},
created(){
},
methods:{
}
}
</script>
<style lang="less">
.full {
#dv-full-screen-container {
background:#000222 url(../assets/images/bg.png);
background-size: 100% 100%;
overflow: auto;
.full-big-border {
.content {
padding: 0 38px 0 38px;
width: calc(100% - 76px);
display: flex;
}
}
}
}
</style>
总结：
以上就是自己实现大屏整体适配的效果和方法，一开始想偷懒，直接使用dataview 可以直接使用，但是可能在自己的需求的时候，难以达到，或则想的是安装一套太臃肿的组件库，难以扶平自己的强迫症。希望大家有更好的封装方法，我这只是实现一点皮毛，希望对刚入门的同学有所帮助。