快捷導(dǎo)航

Vue大屏數(shù)據(jù)展示示例

更新時(shí)間：2021年11月08日 10:30:31 作者：5加H

公司的大數(shù)據(jù)工作組就需要通過數(shù)據(jù)大屏展示一些處理過后有價(jià)值的信息，本文主要介紹了Vue大屏數(shù)據(jù)展示示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

高效實(shí)現(xiàn)需求，避免臃腫的組件庫和重復(fù)造輪子，前段時(shí)間做了很多大屏展示類的項(xiàng)目，今天來跟大家分享一下，大屏的實(shí)踐過程，最開始我是使用了dataview 這個(gè)組件庫，然后發(fā)現(xiàn)是自己并不需要它太多的封裝好的組件，而且在移動(dòng)端，有樣式錯(cuò)亂的問題。所以自己看了他的實(shí)現(xiàn)方式，搞了一個(gè)大屏自適應(yīng)的組件。話不多說，直接上效果圖：

效果圖

需要適配所有尺寸的大型顯示屏，并且在手機(jī)上，可以縮放查看效果。我這里添加了這樣一段代碼，通過縮放body的大小，進(jìn)行等比例放大縮小，達(dá)到不變形，整體適配的效果。

 <script>
        //頁面縮放公共
        function resizePage() {
          // 獲取window的高度
          var clientW = window.innerWidth
          var clientH = window.innerHeight
          // 初始window與body的比值
          var bi =  clientW / 1920
          // 設(shè)置body的寬高-可根據(jù)實(shí)際情況進(jìn)行調(diào)節(jié)
          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>

代碼實(shí)現(xiàn)：

封裝一個(gè)適配的大的組件，可以設(shè)大屏的背景圖和整體效果。其他的基本都是使用的echart的組件庫，因沒有什么特別的定制的需求圖標(biāo)。所以也沒有做太多的個(gè)性化操作

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

總結(jié)：

以上就是自己實(shí)現(xiàn)大屏整體適配的效果和方法，一開始想偷懶，直接使用dataview 可以直接使用，但是可能在自己的需求的時(shí)候，難以達(dá)到，或則想的是安裝一套太臃腫的組件庫，難以扶平自己的強(qiáng)迫癥。希望大家有更好的封裝方法，我這只是實(shí)現(xiàn)一點(diǎn)皮毛，希望對剛?cè)腴T的同學(xué)有所幫助。

到此這篇關(guān)于Vue大屏數(shù)據(jù)展示示例的文章就介紹到這了,更多相關(guān)Vue大屏數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: