{"repo":"v-plugin/vfit","free":true,"listed":false,"github":"https://github.com/v-plugin/vfit","clone":"git clone https://github.com/v-plugin/vfit.git","description":"vfit.js 可视化大屏适配方案 专为大屏数据可视化设计，一键实现全屏自适应与精准定位","language":"JavaScript","stars":142,"topics":["auto-scale","positioning","responsive-layout","scale","big-screen","data-visualization"],"license":null,"category":"analytics","readme_excerpt":"vfit 官网：https://vfit.raychart.cn/ 公众号：土豆的孪生可视化（已认证自媒体，获取全网最全的大屏适配调研方案） 作者：RayChart Vue 3 的轻量缩放与定位解决方案。通过插件提供全局缩放值，并内置 FitContainer 与 5 个专用定位组件，让页面元素在不同分辨率下保持比例与位置一致。 安装与初始化 快速上手 - 父容器需设置定位属性： position: relative （推荐）或 absolute - 两种坐标单位： - % ：位置不随缩放变化，适合居中/相对位置 - px ：位置随缩放乘积变化，适合固定像素布局 居中（专用组件） 要点：居中组件自动完成定位与居中，内部内容按比例缩放。 像素定位（随缩放） 要点：容器缩放后，像素坐标会乘以缩放值（如 left scale ）。 API 精简版 - createFitScale({ target?, designHeight?, designWidth?, scaleMode? }) - target ：监听缩放的容器（默认 #app ） - designHeight ：设计稿高度（默认 1080 ） - designWidth ：设计稿宽度（默认 1920 ） - scaleMode ： 'height' 'width' 'auto' （默认 auto ） - height ：按高度缩放，比例为 容器高度 / 设计稿高度 - width ：按宽度缩放，比例为 容器宽度 / 设计稿宽度 - auto ：根据容器宽高比与设计比（ 设计稿宽度 / 设计稿高度 ）自动选择按宽或按高 - useFitScale() ：在组件内获取当前缩放值 Ref - FitContainer 组件属性： - top/bottom/left/right?: number - unit?: 'px' '%' （默认 px ） - scale?: number （覆盖全局缩放） - z?: number （默认 300 ） - 专用定位组件： - 、 、 、 ：支持 top/left/right/bottom 、 unit 、 scale 、 z - ：支持 scale 、 z 小贴士 - 重要 ：首次使用时必须在入口文件引入样式： import 'vfit/style.css' - 使用 unit='px' 时， top/left 随缩放变化， right/bottom 保持实际像素距离不变 - 使用 right 时，缩放原点为右上角；同时设置 bottom 与 right 时为右下角 React 支持 该库的 React 版本请访问 vfit-react。","default_branch":null,"files":null,"tree":[],"storefront":"/r/v-plugin","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/v-plugin/vfit/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}