vfit 0.1.6 → 0.1.9

package/README.md

@@ -1,94 +1,78 @@
 # vfit
 
-一个用于 Vue 3 的轻量缩放插件，提供全局缩放值与 `FitContainer` 组件，使 UI 能根据容器尺寸进行自适应缩放。
+Vue 3 的轻量缩放与定位解决方案。通过插件提供全局缩放值，并内置 `FitContainer` 组件，让页面元素在不同分辨率下保持比例与位置一致。
 
-## 安装
+## 安装与初始化
 
 ```
 npm i vfit
 ```
 
-> 注意：需要同时引入样式文件
-
 ```ts
+// main.ts
 import { createFitScale } from 'vfit'
 import 'vfit/style.css'
 
 app.use(createFitScale({ target: '#app', designHeight: 1080 }))
 ```
 
-## 组件用法
-
-`FitContainer` 支持两种坐标单位：`%` 与 `px`
+## 快速上手
 
-- `%`：不参与缩放，始终基于容器百分比定位（适用于居中或相对位置）；缩放仅作用于内容的 `transform: scale(...)`
-- `px`：参与缩放，容器位置值会按比例乘以缩放值（适用于固定像素布局）
+- 父容器需设置定位属性：`position: relative`（推荐）或 `absolute`
+- 两种坐标单位：
+  - `%`：位置不随缩放变化，适合居中/相对位置
+  - `px`：位置随缩放乘积变化，适合固定像素布局
 
-### 使用 `%`（常用于居中）
+### 居中（百分比）
 
 ```vue
 <template>
-  <!-- 设置百分比位置，内容通过 translate 实现居中 -->
-  <FitContainer :top="50" :left="50" :unit="'%'">
-    <div style="transform: translate(-50%, -50%)">
-      <!-- 你的内容 -->
-    </div>
-  </FitContainer>
+  <div class="viewport">
+    <FitContainer :top="50" :left="50" unit="%">
+      <div class="card">内容</div>
+    </FitContainer>
+  </div>
 </template>
-```
-
-说明：
-- `top/left` 使用百分比时，定位不会因缩放变化而改变；缩放仅影响内部内容的尺寸
-- 通过 `translate(-50%, -50%)` 将内容以中心对齐，这种写法在缩放时也保持中心位置
-
-### 使用 `px`（固定像素布局）
 
-```vue
-<template>
-  <!-- 像素坐标将随缩放值同步乘积，保持相对位置 -->
-  <FitContainer :top="90" :left="90" :unit="'px'">
-    <!-- 你的内容 -->
-  </FitContainer>
-</template>
+<style scoped>
+.viewport { position: relative; width: 100%; height: 100vh; }
+.card { transform: translate(-50%, -50%); }
+</style>
 ```
 
-说明：
-- 当容器缩放时，`top/left` 等像素值会按缩放比乘积计算（例如 `left * scale`）
-- 适用于基于像素的精细定位需求
-
-## API
-
-- `createFitScale(options)`：注册插件，提供全局缩放值与组件
-  - `target?: string | HTMLElement`：监听缩放的目标容器，默认 `#app`
-  - `designHeight?: number`：设计稿高度（用于高为主的缩放基准），默认 `1080`
-
-- `useFitScale()`：在组件内获取当前缩放值（`Ref<number>`）
-
-- `FitContainer`：定位+缩放组件（已全局注册）
-  - `scale?: number`：可选覆盖缩放值（不传则使用全局缩放）
-  - `top/bottom/left/right?: number`：定位坐标
-  - `unit?: 'px' | '%'`：坐标单位，默认 `'px'`
+要点：`top/left` 为百分比时，位置不受缩放影响；仅内部内容按比例缩放。
 
-## 示例：百分比居中缩放卡片
+### 像素定位（随缩放）
 
 ```vue
 <template>
-  <FitContainer :top="50" :left="50" unit="%">
-    <div class="card">
-      ...内容...
-    </div>
-  </FitContainer>
+  <div class="viewport">
+    <FitContainer :top="90" :left="90" unit="px">
+      <div class="box">内容</div>
+    </FitContainer>
+  </div>
 </template>
 
 <style scoped>
-.card {
-  transform: translate(-50%, -50%);
-  width: 400px;
-  height: 260px;
-}
+.viewport { position: relative; width: 100%; height: 100vh; }
+.box { width: 120px; height: 80px; }
 </style>
 ```
 
-这段写法的效果：
-- 位置始终在容器中心（不受缩放影响）
-- 卡片尺寸跟随缩放变化，保持居中且等比缩放
+要点：容器缩放后，像素坐标会乘以缩放值（如 `left * scale`）。
+
+## API 精简版
+
+- `createFitScale({ target?, designHeight? })`
+  - `target`：监听缩放的容器（默认 `#app`）
+  - `designHeight`：设计稿高度（默认 `1080`）
+- `useFitScale()`：在组件内获取当前缩放值 `Ref<number>`
+- `FitContainer` 组件属性：
+  - `top/bottom/left/right?: number`
+  - `unit?: 'px' | '%'`（默认 `px`）
+  - `scale?: number`（覆盖全局缩放）
+
+## 小贴士
+
+- 使用 `right` 时，缩放原点为右上角（更易实现右侧对齐元素）
+- 首次接入时，务必引入样式：`import 'vfit/style.css'`

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "vfit",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "description": "A tiny Vue 3 plugin to auto-fit UI scale based on container size, plus a FitContainer component for easy positioning.",
+  "keywords": [
+    "vue3",
+    "vfit",
+    "scale",
+    "responsive",
+    "container",
+    "positioning",
+    "auto-scale",
+    "vue-plugin"
+  ],
   "license": "MIT",
   "type": "module",
   "main": "dist/fitscale.umd.js",
@@ -15,7 +25,8 @@
     "./style.css": "./dist/style.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
     "build": "vite build"