Vue大屏数据展示示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

高效实现需求，避免臃肿的组件库和重复造轮子，前段时间做了很多大屏展示类的项目，今天来跟大家分享一下，大屏的实践过程，最开始我是使用了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>