Vue large screen data display example

In order to efficiently meet requirements and avoid bloated component libraries and reinventing the wheel, I have done a lot of large-screen display projects some time ago. Today I want to share with you the practical process of large-screen. At the beginning, I used the dataview component library, and then I found that I did not need too many of its encapsulated components, and on the mobile side, there were problems with style confusion. So I looked at his implementation method and made a large-screen adaptive component. Without further ado, here are the renderings:

Rendering

It needs to be adapted to large display screens of all sizes, and on mobile phones, the effect can be zoomed in and out to be viewed. I have added a piece of code here to scale the body in proportion to achieve the effect of no deformation and overall adaptation.

 <script>
        //Page scaling public function resizePage() {
          // Get the height of the window var clientW = window.innerWidth
          var clientH = window.innerHeight
          // Initial window to body ratio var bi = clientW / 1920
          // Set the width and height of the body - can be adjusted according to actual conditions 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>

Code implementation:

Encapsulate an adaptive large component, which can set the background image and overall effect of the large screen. The rest are basically using the echart component library, because there are no special customized icons required. So there is not much personalization.

<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>

Summarize:

The above are the effects and methods of achieving overall adaptation of the large screen by yourself. At first, you may want to be lazy and use dataview directly, but it may be difficult to achieve when you need it, or you may want to install a set of too bloated component libraries, which is difficult to appease your obsessive-compulsive disorder. I hope you have a better encapsulation method. I have only implemented a little bit of the surface and hope it will be helpful to students who are just getting started.

This is the end of this article about the Vue large-screen data display example. For more relevant Vue large-screen data content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!