示例与场景
🎮 交互式布局实验台
下方使用真正的 vfit-lt / vfit-rt / vfit-lb / vfit-rb / vfit-center 组件。
拖拽滑块、切换参数，观察 5 个定位组件在不同容器尺寸、缩放倍数、间距和单位下的实时变化。
1. 左上角 — vfit-lt
top + left 均乘以全局 scale，transform-origin 自动设为 0 0。
vue
<vfit-lt :top="20" :left="20">
<Logo />
</vfit-lt>vfit-lt
top:16px left:16px
2. 右上角 — vfit-rt
top + right 均乘以 scale，transform-origin 自动设为 100% 0。
vue
<vfit-rt :top="20" :right="20">
<Clock />
</vfit-rt>vfit-rt
top:16px right:16px
3. 左下角 — vfit-lb
bottom + left 均乘以 scale，transform-origin 自动设为 0 100%。
vue
<vfit-lb :bottom="20" :left="20">
<Chart />
</vfit-lb>vfit-lb
bottom:16px left:16px
4. 右下角 — vfit-rb
bottom + right 均乘以 scale，transform-origin 自动设为 100% 100%。
vue
<vfit-rb :bottom="20" :right="20">
<Panel />
</vfit-rb>vfit-rb
bottom:16px right:16px
5. 居中 — vfit-center
自动 top:50%; left:50% + translate(-50%,-50%)，内容随 scale 缩放。
vue
<vfit-center>
<MainMap />
</vfit-center>vfit-center
6. 百分比单位 unit="%"
百分比模式下四边间距不随 scale 变化，仅内容缩放。
vue
<vfit-lt :top="10" :left="10" unit="%">
<Banner />
</vfit-lt>10%,10%
top:10% left:10%
7. 自定义缩放 :scale
传 :scale 覆盖全局值，传 0 或不传则走全局 fitScale。
vue
<vfit-lt :top="30" :left="30" :scale="0.5">
<MiniWidget />
</vfit-lt>scale 0.5
top:30px left:30px scale:0.5 → 实际 15px
8. 层级 :z
z 越大越靠前，默认 300。
vue
<vfit-lt :top="10" :left="10" :z="999">
<TopLayer />
</vfit-lt>
<vfit-lt :top="30" :left="30" :z="100">
<BottomLayer />
</vfit-lt>z=999 (上层)
z=100 (下层)
z=999 覆盖在 z=100 上方
9. 通用组件 FitContainer
需要四边同用或兼容旧代码时使用：
vue
<FitContainer :top="20" :right="20" :bottom="20" :left="20" unit="px">
四边撑满
</FitContainer>FitContainer 四边撑满
top:14 bottom:14 left:14 right:14
vue
<FitContainer :top="50" :left="50" unit="%">
<div style="transform:translate(-50%,-50%)">百分比居中</div>
</FitContainer>百分比居中
top:50% left:50%