专为大屏数据可视化设计，一键实现全屏自适应与精准定位。

Vue 3 的轻量缩放与定位解决方案。通过插件提供全局缩放值，并内置 FitContainer 与 5 个专用定位组件，让页面元素在不同分辨率下保持比例与位置一致。

功能特点

组件化精准定位

内置 5 种专用方位组件，支持像素/百分比双坐标模型，高效还原设计稿布局

大屏专享

专为大屏场景优化，支持多种分辨率适配

极速集成

零配置开箱即用，支持 Vue 3 指令与组件

npm i vfit

// main.ts
import { createFitScale } from 'vfit'
import 'vfit/style.css'

app.use(createFitScale({ target: '#app', designHeight: 1080, designWidth: 1920, scaleMode: 'auto' }))

• 父容器需设置定位属性：position: relative（推荐）或 absolute
• 两种坐标单位：
  • %：位置不随缩放变化，适合居中/相对位置
  • px：位置随缩放乘积变化，适合固定像素布局

<template>
  <div>
    <vfit-center>
      <div>内容</div>
    </vfit-center>
  </div>
</template>

<style scoped>
.viewport { position: relative; width: 100%; height: 100vh; }
</style>

要点：居中组件自动完成定位与居中，内部内容按比例缩放。

<template>
  <div>
    <FitContainer :top="90" :left="90" unit="px">
      <div>内容</div>
    </FitContainer>
  </div>
</template>

<style scoped>
.viewport { position: relative; width: 100%; height: 100vh; }
.box { width: 120px; height: 80px; }
</style>

要点：容器缩放后，像素坐标会乘以缩放值（如 left * scale）。

• createFitScale({ target?, designHeight?, designWidth?, scaleMode? })
  • target：监听缩放的容器（默认 #app）
  • designHeight：设计稿高度（默认 1080）
  • designWidth：设计稿宽度（默认 1920）
  • scaleMode：'height' | 'width' | 'auto'（默认 auto）
    • height：按高度缩放，比例为 容器高度 / 设计稿高度
    • width：按宽度缩放，比例为 容器宽度 / 设计稿宽度
    • auto：根据容器宽高比与设计比（设计稿宽度 / 设计稿高度）自动选择按宽或按高
• useFitScale()：在组件内获取当前缩放值 Ref<number>
• FitContainer 组件属性：
  • top/bottom/left/right?: number
  • unit?: 'px' | '%'（默认 px）
  • scale?: number（覆盖全局缩放）
  • z?: number（默认 300）
• 专用定位组件：
  • <vfit-lt>、<vfit-rt>、<vfit-lb>、<vfit-rb>：支持 top/left/right/bottom、unit、scale、z
  • <vfit-center>：支持 scale、z

• 使用 unit='px' 时，top/left 随缩放变化，right/bottom 保持实际像素距离不变
• 使用 right 时，缩放原点为右上角；同时设置 bottom 与 right 时为右下角
• 首次接入时，务必引入样式：import 'vfit/style.css'

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/5001