Vue3利用縮放進行屏幕分辨率適配的解決方案講解

更新時間：2024年09月26日 10:49:43 作者：明月清風*

本文詳細解析了如何在Vue3中實現(xiàn)一個自動根據(jù)設計寬度縮放并調整高度的響應式組件,組件的核心功能包括設計寬度設定、動態(tài)縮放比例計算和高度調整,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在前端開發(fā)中，實現(xiàn)響應式布局是確保用戶界面在各種設備上表現(xiàn)一致的關鍵。本文將詳細解析一個 Vue 3 組件的實現(xiàn)，這個組件根據(jù)設計寬度自動縮放，并調整其高度以適應窗口的變化。

組件實現(xiàn)概述

本文將介紹一個 Vue 3 組件，可以在瀏覽器窗口大小發(fā)生變化時自動調整其縮放比例和高度。這個組件的核心目標是使組件的內容在不同設備上看起來一致，無論設備的屏幕大小如何變化。

組件的核心功能

設計寬度的定義：組件的設計寬度被設定為 1920 像素，可以根據(jù)UI圖的設計尺寸自行修改。
縮放計算：根據(jù)瀏覽器的實際寬度與設計寬度之間的比率，動態(tài)計算縮放比例。這個縮放比例會用于調整組件的顯示效果，以適應不同屏幕寬度。
動態(tài)高度調整：除了縮放，組件的高度也需要根據(jù)瀏覽器的高度動態(tài)調整，以保持內容的正確顯示。

組件代碼解析

下面是實現(xiàn)這個功能的 Vue 3 組件代碼：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

// 設定設計寬度
const designWidthValue = 1920;
const designWidth = ref(`${designWidthValue}px`);
const zoom = ref(window.innerWidth / designWidthValue);
const containerHeight = ref(`${window.innerHeight / zoom.value}px`);
const scale = ref(`scale(${zoom.value})`);
const props = defineProps(['containerClass']);

// 更新尺寸的函數(shù)
function updateSize() {
  zoom.value = (window.innerWidth / designWidthValue).toFixed(3);
  scale.value = `scale(${zoom.value})`;
  containerHeight.value = `${window.innerHeight / zoom.value}px`;
}

// 組件掛載時，添加窗口大小變化的事件監(jiān)聽
onMounted(() => {
  window.addEventListener('resize', updateSize);
  updateSize();
});

// 組件卸載時，移除事件監(jiān)聽
onUnmounted(() => {
  window.removeEventListener('resize', updateSize);
});
</script>

<template>
  <div
    :class="props.containerClass"
    :style="{
      width: designWidth,
      height: containerHeight,
      overflow: 'hidden',
      transform: scale,
      transformOrigin: 'left top'
    }"
  >
    <slot></slot>
  </div>
</template>

<style scoped lang="scss">

</style>

代碼解釋

引入 Vue Composition API：使用 ref、onMounted 和 onUnmounted 函數(shù)來管理組件狀態(tài)和生命周期。
計算設計寬度：通過 designWidthValue 設置設計寬度，并創(chuàng)建響應式變量 designWidth 和 zoom。zoom 用于存儲根據(jù)瀏覽器寬度計算得出的縮放比例。
動態(tài)計算縮放比例：updateSize 函數(shù)在窗口大小變化時被調用，它重新計算縮放比例 zoom 和組件的高度 containerHeight。toFixed(3) 方法用于確?？s放比例有三位小數(shù)，避免由于浮點數(shù)精度問題導致的不必要的變形。
組件的樣式：組件的樣式通過內聯(lián)樣式進行設置，包括 width、height、overflow、transform 和 transformOrigin。transform 使用計算得出的縮放比例來調整組件的大小。
事件監(jiān)聽：在組件掛載時，通過 onMounted 添加窗口大小變化的事件監(jiān)聽器，在組件卸載時通過 onUnmounted 移除事件監(jiān)聽器，防止內存泄漏。

在 Vue 應用中使用組件

要在你的 Vue 3 應用中使用這個組件，你需要在需要的地方導入并注冊它。以下是一個在 App.vue 中使用 ResponsiveContainer 組件的示例：

<!-- src/App.vue -->
<template>
  <ResponsiveContainer containerClass="my-container">
    <h1>Welcome!</h1>
    <p>屏幕自適應</p>
  </ResponsiveContainer>
</template>

<script setup lang="ts">
import ResponsiveContainer from './components/ResponsiveContainer.vue';
</script>

<style scoped>
.my-container {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}
</style>