🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
最近公司又接了個數據可視化大屏的需求，設計稿是標準的
1920 x 1080。 拿到設計稿的那一刻，我的內心是拒絕的... 🤯
大家都知道，做大屏適配最煩的就是還原設計稿座標。 以前我嘗試過各種方案：
- rem / vw: 每一個 px 都要轉換，寫 css 的時候旁邊還得開個計算器，太累。
- 百分比: 更是噩夢，稍微動一下佈局就亂了。
- 手動 scale: 雖然好用，但要自己寫
resize監聽，處理防抖，還要算居中偏移，很容易出 bug（比如留白不對、點擊錯位）。
這次我想偷個懶，在 GitHub 上翻了一圈，發現了一個基於 Vue 3 的超輕量適配庫 —— vfit。 用完之後我只想説：真香！原來適配大屏可以像寫普通頁面一樣簡單。
這裏分享一下我的使用過程，希望能幫到同樣在“搬磚”的兄弟們。
🛠 3分鐘上手實錄
1. 安裝
首先安裝庫，包很小，沒什麼亂七八糟的依賴。
npm install vfit
2. “傻瓜式”配置
在 main.ts 裏註冊一下。 這裏最爽的是，可以直接填設計稿的寬高。我的設計稿是 1920x1080，我就直接填進去，根本不用換算。
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createFitScale } from 'vfit'
import 'vfit/style.css' // ⚠️ 劃重點：一定要引入這個樣式，不然佈局組件會失效
const app = createApp(App)
app.use(createFitScale({
target: '#app', // 告訴它要在哪個容器搞事情
designWidth: 1920, // 設計稿寬
designHeight: 1080, // 設計稿高
scaleMode: 'auto' // 默認 auto 就能應付絕大多數情況
}))
app.mount('#app')
這就完事了？對，這就完事了。 這時候你的頁面已經具備了自動縮放的能力，無論怎麼拖拽瀏覽器窗口，內容都會保持比例並自動居中。
✨ 我最愛的功能：FitContainer
配置好 scale 只是第一步，真正的痛點是組件定位。 以前用 scale 方案，子元素定位還是得小心翼翼。
vfit 提供了一個叫 <FitContainer> 的組件，這個簡直是“偷懶神器”。 它可以直接接收設計稿上的 px 座標！
舉個栗子 🌰
假設設計稿上：
- 標題：距離頂部 50px，水平居中。
- 左側圖表：距離左邊 30px，頂部 100px。
- 右側列表：死死貼住右邊框，距離右邊 30px。
用 vfit 寫代碼是這樣的：
<template>
<div class="screen-wrapper">
<!-- 標題：居中咱們還是用 flex 方便，或者也可以算 left -->
<FitContainer :top="50" :left="0" :right="0">
<h1 style="text-align: center">我的酷炫大屏</h1>
</FitContainer>
<!-- 左側圖表：直接寫設計稿座標 -->
<FitContainer :top="100" :left="30" :z="10">
<ChartComponent />
</FitContainer>
<!-- 右側列表：注意這裏！支持 right 定位 -->
<FitContainer :top="100" :right="30">
<ListComponent />
</FitContainer>
</div>
</template>
發現沒？我完全不需要思考縮放比例！
- 設計稿標
30px，我就寫30。 - 插件內部會自動根據當前的縮放倍率，幫我計算好實際的位置。
- 不管是 4K 屏還是筆記本小屏幕，位置看起來都和設計稿一模一樣。
🤔 踩坑小貼士
在使用過程中也發現了一些需要注意的小細節，分享給大家避坑：
-
樣式引入不能忘： 第一次用的時候忘了
import 'vfit/style.css'，結果<FitContainer>變成普通 div 了，排版全亂。大家千萬別忘了。 -
z-index 層級：
<FitContainer>默認有個z-index: 300（大概是為了防止被背景蓋住）。如果你的彈窗被遮住了，記得給組件傳個更大的:z="999"。 -
Right/Bottom 的特殊邏輯： 我看了一下源碼發現，如果你用
:left，它會根據縮放比例位移（保持相對設計稿位置）。 但如果你用:right，它是不乘縮放比例的。 這其實很科學：因為大屏通常是居中顯示的，如果右側元素也按比例縮放距離，在寬屏下可能會離屏幕邊緣太遠。現在的邏輯能保證它始終吸附在屏幕邊緣，視覺效果更好。
總結
如果你也在做 Vue 3 的大屏項目，真心推薦試一下 vfit。 它不是功能最強大的，但絕對是最省心的。 把精力花在畫 ECharts 上，而不是在那算 rem 或者調 css 佈局，這才是程序員該乾的事嘛！😂
項目地址： 🔗 Github: https://github.com/v-plugin/vfit 🔗 文檔: https://web-vfit.netlify.app
祝大家的大屏項目都能一次過稿！🍻
