vfit 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -20
- package/package.json +13 -2
package/README.md
CHANGED
|
@@ -24,31 +24,46 @@ app.use(createFitScale({ target: '#app', designHeight: 1080 }))
|
|
|
24
24
|
- `%`：不参与缩放，始终基于容器百分比定位（适用于居中或相对位置）；缩放仅作用于内容的 `transform: scale(...)`
|
|
25
25
|
- `px`：参与缩放，容器位置值会按比例乘以缩放值（适用于固定像素布局）
|
|
26
26
|
|
|
27
|
+
### 父容器定位要求
|
|
28
|
+
|
|
29
|
+
`FitContainer` 内部采用绝对定位（`position: absolute`），因此父级容器必须设置 `position: relative` 或 `position: absolute`，以确保定位参照正确（通常推荐 `relative`）。
|
|
30
|
+
|
|
27
31
|
### 使用 `%`（常用于居中）
|
|
28
32
|
|
|
29
33
|
```vue
|
|
30
34
|
<template>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
<div class="viewport">
|
|
36
|
+
<FitContainer :top="50" :left="50" :unit="'%'">
|
|
37
|
+
<div class="card">内容</div>
|
|
38
|
+
</FitContainer>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<style scoped>
|
|
42
|
+
.viewport { position: relative; width: 100%; height: 100vh; }
|
|
43
|
+
.card { transform: translate(-50%, -50%); }
|
|
44
|
+
</style>
|
|
37
45
|
</template>
|
|
38
46
|
```
|
|
39
47
|
|
|
40
48
|
说明：
|
|
41
49
|
- `top/left` 使用百分比时，定位不会因缩放变化而改变；缩放仅影响内部内容的尺寸
|
|
42
50
|
- 通过 `translate(-50%, -50%)` 将内容以中心对齐，这种写法在缩放时也保持中心位置
|
|
51
|
+
- 父级容器需具备定位属性（`position: relative` 或 `absolute`）
|
|
43
52
|
|
|
44
53
|
### 使用 `px`（固定像素布局）
|
|
45
54
|
|
|
46
55
|
```vue
|
|
47
56
|
<template>
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
57
|
+
<div class="viewport">
|
|
58
|
+
<FitContainer :top="90" :left="90" :unit="'px'">
|
|
59
|
+
<div class="box">内容</div>
|
|
60
|
+
</FitContainer>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<style scoped>
|
|
64
|
+
.viewport { position: relative; width: 100%; height: 100vh; }
|
|
65
|
+
.box { width: 120px; height: 80px; }
|
|
66
|
+
</style>
|
|
52
67
|
</template>
|
|
53
68
|
```
|
|
54
69
|
|
|
@@ -73,19 +88,16 @@ app.use(createFitScale({ target: '#app', designHeight: 1080 }))
|
|
|
73
88
|
|
|
74
89
|
```vue
|
|
75
90
|
<template>
|
|
76
|
-
<
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
</
|
|
80
|
-
</
|
|
91
|
+
<div class="viewport">
|
|
92
|
+
<FitContainer :top="50" :left="50" unit="%">
|
|
93
|
+
<div class="card">...内容...</div>
|
|
94
|
+
</FitContainer>
|
|
95
|
+
</div>
|
|
81
96
|
</template>
|
|
82
97
|
|
|
83
98
|
<style scoped>
|
|
84
|
-
.
|
|
85
|
-
|
|
86
|
-
width: 400px;
|
|
87
|
-
height: 260px;
|
|
88
|
-
}
|
|
99
|
+
.viewport { position: relative; width: 100%; height: 100vh; }
|
|
100
|
+
.card { transform: translate(-50%, -50%); width: 400px; height: 260px; }
|
|
89
101
|
</style>
|
|
90
102
|
```
|
|
91
103
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vfit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "A tiny Vue 3 plugin to auto-fit UI scale based on container size, plus a FitContainer component for easy positioning.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"vue3",
|
|
7
|
+
"vfit",
|
|
8
|
+
"scale",
|
|
9
|
+
"responsive",
|
|
10
|
+
"container",
|
|
11
|
+
"positioning",
|
|
12
|
+
"auto-scale",
|
|
13
|
+
"vue-plugin"
|
|
14
|
+
],
|
|
5
15
|
"license": "MIT",
|
|
6
16
|
"type": "module",
|
|
7
17
|
"main": "dist/fitscale.umd.js",
|
|
@@ -15,7 +25,8 @@
|
|
|
15
25
|
"./style.css": "./dist/style.css"
|
|
16
26
|
},
|
|
17
27
|
"files": [
|
|
18
|
-
"dist"
|
|
28
|
+
"dist",
|
|
29
|
+
"README.md"
|
|
19
30
|
],
|
|
20
31
|
"scripts": {
|
|
21
32
|
"build": "vite build"
|