“This is the third day of my participation in the November Gwen Challenge. Check out the details: The Last Gwen Challenge 2021

Efficient implementation requirements and avoid bloated component library and repeat the wheels, recently made a lot of time the display class project, today to share with you that time the practice process, at first I is to use the dataview this component library, and found that I didn’t need it is too much good to the component, and in the mobile terminal, with style disorder problem. So I looked at his implementation and made a large screen adaptive component. Without further ado, directly on the renderings:

rendering

Need to fit all sizes of large display, and on the phone, can be zoomed to see the effect. Here I added such a code, by scaling the size of the body, zoom in and out in equal proportion, to achieve the effect of no deformation, overall fit.

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

Code implementation:

Encapsulate a large adaptive component, you can set a large screen background and overall effect. The rest is basically using echart’s component library, as there is no special custom requirement icon. So I didn’t do 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>
Copy the code
 
<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>
Copy the code

Conclusion:

The above is the effect and method of realizing the overall adaptation of large screen. At the beginning, if you want to be lazy, you can use dataView directly, but it may be difficult to achieve when you need it, or you want to install a set of too bloated component library, which is difficult to smooth your obsessive-compulsive disorder. I hope you have a better encapsulation method, I only realize a little fur, I hope to help the students who just started.