快捷導(dǎo)航

vue常用的數(shù)字孿生可視化的自適應(yīng)方案

更新時(shí)間：2022年07月08日 10:38:36 作者：YimWu

這篇文章主要為大家介紹了vue常用的數(shù)字孿生可視化的自適應(yīng)方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

寫(xiě)在前面

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

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

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

按百分比實(shí)現(xiàn)自適應(yīng)應(yīng)該是最最簡(jiǎn)單的方式了，不需要額外增加如何配置，即可實(shí)現(xiàn)，我們來(lái)做個(gè)試驗(yàn)測(cè)試一下按百分比實(shí)現(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>

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

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

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

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

Rem + Resize

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

// resize.js
const scaleListener = () => {
  window.addEventListener('resize', resize)
  console.log('scaleListening......')
}
const resize = () => {
  // 與原來(lái) 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>

首先我們定義了一個(gè) resize 函數(shù)用于啟動(dòng)監(jiān)聽(tīng) window 的resize 事件，當(dāng) window 發(fā)生 resize 時(shí)，通過(guò)與事先定義的標(biāo)準(zhǔn)屏幕高度 1080 對(duì)比，計(jì)算比值，更新事先定義的標(biāo)準(zhǔn) fontsize 16px。

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

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