vue大屏展示適配的方法是什么

這篇文章主要介紹“vue大屏展示適配的方法是什么”，在日常操作中，相信很多人在vue大屏展示適配的方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue大屏展示適配的方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

具體內容如下

1.utils文件夾建一個文件cv以下代碼

export function useIndex (appRef) {
  // * appRef指向最外層容器

  // * 定時函數
  let timer = null
  // * 默認縮放值
  const scale = {
    width: '1',
    height: '1'
  }
  // * 設計稿尺寸（px）
  const baseWidth = 1920
  const baseHeight = 1080

  // * 需保持的比例（默認2）
  // const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  const baseProportion = 2
  const calcRate = () => {
    // 當前寬高比
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    if (appRef) {
      if (currentRate > baseProportion) {
        // 表示更寬
        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
        scale.height = (window.innerHeight / baseHeight).toFixed(5)
        appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      } else {
        // 表示更高
        scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
        scale.width = (window.innerWidth / baseWidth).toFixed(5)
        appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      }
    }
  }

  const resize = () => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      calcRate()
    }, 200)
  }

  // 改變窗口大小重新繪制
  const windowDraw = () => {
    window.addEventListener('resize', resize)
  }

  return {
    appRef,
    calcRate,
    windowDraw
  }
}

2.app.vue結構樣式

<template>
  <div ref="appRef" class="main">
    <div class="layout-container">
    </div>
  </div>
</template>

<script>
import { useIndex } from '@/utils/utilsDram.js'
export default {
  mounted () {
    const { calcRate, windowDraw } =useIndex(this.$refs.appRef)
    calcRate()
    windowDraw()
  }
}
</script>
<style lang="scss" scoped>
.main {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;

  .layout-container {
    width: 100%;
    height: 100%;
    }
   }
</style>

3.字體大小盒子寬度直接設置px不管放大縮小都是最初的樣子，基本頁面大小不會相差太遠,下圖是頁面放大500倍的效果

到此，關于“vue大屏展示適配的方法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！