寫在前面

前面博主寫過一篇文章 面試官：除了 HTTP，你還用過什么通信協(xié)議？(Websocket 在數字孿生中的應用)，簡述了數字孿生產品的數據更新機制，對于數字孿生產品來說，數據非常重要，孿生世界的數據呈現可以反映現實世界的真實情況，而在數據展示中，除了數據更新機制之外，還有一個非常非常重要的東西，那就是可視化表格的展現，而由于數字孿生可視化界面主要用于展示數據，因此在大部分應用場景中，它經常被放到各式各樣的展示屏幕展示，可能是普通的電腦屏幕，可能是平板，也有可能是好幾塊屏幕組成的可視化大屏系統(tǒng)，那么表格的自適應便成了展示的重要衡量標準，如何完成自適應調整，將在產品體驗中占據非常重要的比重！

各自適應方案對比

百分比自適應方案

按百分比實現自適應應該是最最簡單的方式了，不需要額外增加如何配置，即可實現，我們來做個試驗測試一下按百分比實現自適應的效果

<template>
  <div class="box">
    <div class="inner-box">
    </div>
  </div>
</template>
<style lang='scss' scope>
  .box {
    width: 100vw;
    height: 100vh;
    .inner-box {
      width: 20%;
      height: 20%;
      background: cadetblue;
    }
  }
</style>

我們先定義一個外部容器 box ，然后在 box 里創(chuàng)建一個用于自適應的長方形 inner-box，然后將自適應長方形寬和高都設置為20%

我們可以看到，當我們將其寬高都設置為百分比時，window 的寬、高變化時，長方形的寬和高也將隨著發(fā)生變化，可以實現初步的自適應。

而當我們將這樣一個自適應方案應用到數字孿生可視化界面上時，我們會發(fā)現，效果有點差強人意

通過我們模擬占位的表格可以很明顯看出，當我們對窗口進行橫向和豎向的縮放時，左右邊的表格是進行了自適應的，而由于在這個自適應方案中寬和高并沒有什么聯(lián)系，導致了寬高各自自適應，最終導致了表格寬高比例嚴重失衡，展現得非常 ugly，所以，這個方案在數字孿生可視化這個應用場景中并不適合。

Rem + Resize

第二個方案采用的是 rem，而 rem 的原理是根據根元素 fontsize 來計算 rem 的單位長度，那么我們就可以通過監(jiān)聽 window 的 resize，動態(tài)修改 fontsize，進而影響 rem，最終達到自適應的效果，下面我們做個測試

// resize.js
const scaleListener = () => {
  window.addEventListener('resize', resize)
  console.log('scaleListening......')
}
const resize = () => {
  // 與原來 1080 的比值
  let scale = window.innerHeight / 1080
  document.documentElement.style.fontSize = `${16 * scale}px` 
  console.log('resize')
}
export {
  scaleListener
}
// APP.vue
<script>
import { scaleListener } from '../src/components/resize/resize';
export default {
  mounted() {
    scaleListener()
  },
}
</script>

首先我們定義了一個 resize 函數用于啟動監(jiān)聽 window 的resize 事件，當 window 發(fā)生 resize 時，通過與事先定義的標準屏幕高度 1080 對比，計算比值，更新事先定義的標準 fontsize 16px。

這個時候，當我們在組件中使用 rem 作為單位時，隨著 window 的 resize，rem 將被重置，元素也將被重置，值得注意的是，這個時候，由于表格的寬高采用的都是 rem ，因此在觸發(fā) resize 時，表格的寬高比例不會發(fā)生變化，也就達到了數字孿生可視化產品所應具有的自適應標準了

可能大家會有疑問，為啥是監(jiān)聽 height 而不是 width，主要的原因是數字孿生可視化界面一般表格都處于左右兩邊，寬度變化對于表格并不會造成大的影響，只要表格做到靠左、靠右顯示即可，而高度才是影響表格的重要因素，當高度變化時，表格如果不進行縮放，表格的內容將會無法完整顯示。

以上就是vue常用的數字孿生可視化的自適應方案的詳細內容，更多關于vue數字孿生可視化自適應的資料請關注腳本之家其它相關文章！

最新評論