寫在前面

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

各自適應(yīng)方案對比

百分比自適應(yīng)方案

按百分比實現(xiàn)自適應(yīng)應(yīng)該是最最簡單的方式了，不需要額外增加如何配置，即可實現(xiàn)，我們來做個試驗測試一下按百分比實現(xiàn)自適應(yī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)建一個用于自適應(yīng)的長方形 inner-box，然后將自適應(yīng)長方形寬和高都設(shè)置為20%

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

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

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

Rem + Resize

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

// 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 函數(shù)用于啟動監(jiān)聽 window 的resize 事件，當(dāng) window 發(fā)生 resize 時，通過與事先定義的標(biāo)準(zhǔn)屏幕高度 1080 對比，計算比值，更新事先定義的標(biāo)準(zhǔn) fontsize 16px。

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

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

以上就是vue常用的數(shù)字孿生可視化的自適應(yīng)方案的詳細內(nèi)容，更多關(guān)于vue數(shù)字孿生可視化自適應(yīng)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論