Tui Plus Vapor

Appearance

VaporCSS position样式写法参考 ​

定位方式 ​

CSS 类样式备注
drposition:relative;相对定位
daposition:absolute;绝对定位
dfposition:fixed;固定定位

顶部定位 ​

CSS 类样式备注
dt-10top:10rpx;顶部距离 10rpx
dt-20rpxtop:20rpx;顶部距离 20rpx
dt-30%top:30%;顶部距离 30%

底部定位 ​

CSS 类样式备注
db-10bottom:10rpx;底部距离 10rpx
db-20rpxbottom:20rpx;底部距离 20rpx
db-30%bottom:30%;底部距离 30%

左侧定位 ​

CSS 类样式备注
dl-10left:10rpx;左侧距离 10rpx
dl-20rpxleft:20rpx;左侧距离 20rpx
dl-30%left:30%;左侧距离 30%

右侧定位 ​

CSS 类样式备注
dr-10right:10rpx;右侧距离 10rpx
dr-20rpxright:20rpx;右侧距离 20rpx
dr-30%right:30%;右侧距离 30%

方向组合 ​

CSS 类样式备注
dlr-10left:10rpx;right:10rpx;左右距离 10rpx
dtb-10top:10rpx;bottom:10rpx;上下距离 10rpx
dlrt-10left:10rpx;right:10rpx;top:10rpx;左、右、上距离 10rpx
di-10top:10rpx; bottom:10rpx; left:10rpx; right:10rpx;四边距离 10rpx

方向组合规则：

  • 支持任意方向组合：l（左）、r（右）、t（上）、b（下）
  • 例如：dlb-10 表示 left:10rpx;bottom:10rpx;

使用示例 ​

相对定位 ​

vue
<!-- 相对定位 -->
<view class="w-200 h-200 bg-gray-100">
  <view class="w-50 h-50 bg-blue-100 dr dt-20 dl-20">
    相对定位元素
  </view>
</view>

绝对定位 ​

vue
<!-- 绝对定位 -->
<view class="w-200 h-200 bg-gray-100 dr">
  <view class="w-50 h-50 bg-blue-100 da dt-20 dl-20">
    绝对定位元素
  </view>
</view>

<!-- 居中定位 -->
<view class="w-200 h-200 bg-gray-100 dr">
  <view class="w-50 h-50 bg-blue-100 da dt-50% dl-50% transform -translate-x-50 -translate-y-50">
    居中定位元素
  </view>
</view>

固定定位 ​

vue
<!-- 固定在顶部 -->
<view class="w-full h-60 bg-white df dt-0 dl-0 dr-0 z-50">
  固定顶部导航栏
</view>

<!-- 固定在底部 -->
<view class="w-full h-60 bg-white df db-0 dl-0 dr-0 z-50">
  固定底部导航栏
</view>

<!-- 固定在右下角 -->
<view class="w-40 h-40 bg-primary rounded-full df db-20 dr-20 z-50 flex items-center justify-center">
  <text class="text-white">+</text>
</view>

方向组合定位 ​

vue
<!-- 四边定位 -->
<view class="w-200 h-200 bg-gray-100 dr">
  <view class="bg-blue-100 da di-20">
    四边距离 20rpx 的元素
  </view>
</view>

<!-- 上下左右组合 -->
<view class="w-200 h-200 bg-gray-100 dr">
  <view class="bg-blue-100 da dt-10 db-30 dl-15 dr-25">
    自定义四边距离的元素
  </view>
</view>

最佳实践 ​

  1. 定位上下文：使用 dr（相对定位）创建定位上下文，作为绝对定位元素的父容器
  2. 层级管理：使用 z- 类控制元素的层级关系
  3. 居中定位：结合 transform 实现元素的居中定位
  4. 响应式：使用 rpx 单位实现响应式定位
  5. 性能优化：避免过度使用固定定位，影响页面性能
  6. 浏览器兼容性：注意定位在不同浏览器中的表现

常见定位模式 ​

居中定位 ​

vue
<!-- 水平垂直居中 -->
<view class="w-200 h-200 bg-gray-100 dr">
  <view class="w-100 h-100 bg-blue-100 da dt-50% dl-50% transform -translate-x-50 -translate-y-50">
    居中元素
  </view>
</view>

悬浮按钮 ​

vue
<!-- 悬浮操作按钮 -->
<view class="w-120 h-120 bg-primary rounded-full df db-40 dr-40 z-50 flex items-center justify-center shadow-lg">
  <text class="text-white s-32">+</text>
</view>

弹窗覆盖 ​

vue
<!-- 弹窗覆盖层 -->
<view class="fixed inset-0 bg-black/50 z-40 flex items-center justify-center">
  <view class="w-600 h-400 bg-white rounded-lg p-20">
    弹窗内容
  </view>
</view>

标签定位 ​

vue
<!-- 角标定位 -->
<view class="w-100 h-100 bg-gray-100 dr">
  <view class="w-20 h-20 bg-red-500 rounded-full df dt--5 dr--5 z-10 flex items-center justify-center">
    <text class="text-white s-12">3</text>
  </view>
</view>

通过 VaporCSS 定位系统，您可以轻松实现各种精确定位效果，提高开发效率，同时保持代码的清晰和可维护性。