Vue大屏数据 Vue大屏数据展示示例
5加H 人气:0想了解Vue大屏数据展示示例的相关内容吗,5加H在本文为您仔细讲解Vue大屏数据的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue大屏数据,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 可以直接使用,但是可能在自己的需求的时候,难以达到,或则想的是安装一套太臃肿的组件库,难以扶平自己的强迫症。希望大家有更好的封装方法,我这只是实现一点皮毛,希望对刚入门的同学有所帮助。
加载全部内容