Tui Plus Vapor

Appearance

VaporCSS other样式写法参考 ​

透明度 ​

控制元素的透明度：

类名生成的 CSS备注
o-0.5opacity: 0.5;设置元素透明度为 50%

层级 ​

控制元素的 z-index：

类名生成的 CSS备注
z-5z-index: 5;设置元素层级为 5
z-n1z-index: -1;设置元素层级为 -1

文本颜色 ​

控制元素的文本颜色：

类名生成的 CSS备注
c-redcolor: red;设置文本颜色为红色
c-#ccccolor: #ccc;设置文本颜色为 #ccc

颜色系统集成 ​

与主题系统集成，支持使用预设的颜色变量：

类名生成的 CSS备注
c-primarycolor: var(--primary);使用主题中的主色
c-secondarycolor: var(--secondary);使用主题中的次色
c-successcolor: var(--success);使用主题中的成功色
c-warningcolor: var(--warning);使用主题中的警告色
c-dangercolor: var(--danger);使用主题中的危险色
c-infocolor: var(--info);使用主题中的信息色
c-lightcolor: var(--light);使用主题中的亮色
c-darkcolor: var(--dark);使用主题中的暗色

溢出 ​

控制元素的溢出行为：

类名生成的 CSS备注
ohoverflow: hidden;隐藏溢出内容
ovoverflow: visible;显示溢出内容

指针事件 ​

控制元素的指针事件：

类名生成的 CSS备注
ope-aopointer-events: auto;自动指针事件
ope-npointer-events: none;无指针事件
ope-vdpointer-events: visiblePainted;可见绘制区域指针事件
ope-vlpointer-events: visibleFill;可见填充区域指针事件
ope-vepointer-events: visibleStroke;可见描边区域指针事件
ope-vpointer-events: visible;可见区域指针事件
ope-ppointer-events: painted;绘制区域指针事件
ope-fpointer-events: fill;填充区域指针事件
ope-spointer-events: stroke;描边区域指针事件
ope-apointer-events: all;所有区域指针事件
ope-ipointer-events: inherit;继承指针事件

可见性 ​

控制元素的可见性：

类名生成的 CSS备注
ovy-vvisibility: visible;元素可见
ovy-hvisibility: hidden;元素隐藏但保留空间
ovy-cvisibility: collapse;元素折叠（主要用于表格）

光标 ​

控制元素的光标样式：

类名生成的 CSS备注
ocrcursor: pointer;指针光标（手形）
ocr-defaultcursor: default;默认光标（箭头）
ocrndcursor: no-drop;禁止放置光标

光标选项表 ​

选项描述
default默认光标（通常是箭头）
pointer指示链接（通常是手形）
text指示文本（通常是I形光标）
wait指示程序正忙（通常是沙漏或表）
help指示可用的帮助（通常是带有问号的箭头）
crosshair十字线光标
move指示某对象可被移动（通常是四向箭头）
e-resize指示边界可向东（右）调整大小（通常是右箭头）
ne-resize指示边界可向东北（右上）调整大小（通常是右上箭头）
nw-resize指示边界可向西北（左上）调整大小（通常是左上箭头）
n-resize指示边界可向北（上）调整大小（通常是上箭头）
se-resize指示边界可向东南（右下）调整大小（通常是右下箭头）
sw-resize指示边界可向西南（左下）调整大小（通常是左下箭头）
s-resize指示边界可向南（下）调整大小（通常是下箭头）
w-resize指示边界可向西（左）调整大小（通常是左箭头）
progress指示进程（通常是带有插入符号的箭头）
alias指示创建别名或快捷方式（通常是带有加号的箭头）
copy指示可复制对象（通常是带有复制的箭头）
no-drop指示拖放操作不可用（通常是带有一个斜线的圆圈）
not-allowed指示不允许的操作（通常是带有一个斜线的圆圈）
grab指示抓取对象（通常是闭拢的手形）
grabbing指示正在抓取对象（通常是张开的爪子手形）
url('path/to/cursor.png')使用自定义光标图像，其中 'path/to/cursor.png' 是图像的路径

阴影 ​

控制元素的阴影：

类名生成的 CSS备注
bs1box-shadow: 0 0rpx 10rpx 0rpx rgba(2, 4, 38, 0.1);柔和阴影效果
bs2box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);轻微阴影效果

使用示例 ​

透明度 ​

vue
<template>
  <view class="o-0.5 bg-primary p-4 text-white">
    半透明元素
  </view>
</template>

层级 ​

vue
<template>
  <view class="relative">
    <view class="w-20 h-20 bg-red-500 absolute top-0 left-0 z-1"></view>
    <view class="w-20 h-20 bg-blue-500 absolute top-10 left-10 z-2"></view>
    <view class="w-20 h-20 bg-green-500 absolute top-20 left-20 z-3"></view>
  </view>
</template>

文本颜色 ​

vue
<template>
  <view class="c-primary font-bold">
    主色文本
  </view>
</template>

溢出 ​

vue
<template>
  <view class="w-40 h-20 oh bg-gray-100 p-2">
    <text>这段文本会被截断，因为容器设置了溢出隐藏。</text>
  </view>
</template>

光标 ​

vue
<template>
  <view class="ocr bg-primary p-4 text-white">
    悬停时显示手形光标
  </view>
</template>

阴影 ​

vue
<template>
  <view class="bs1 p-4 bg-white rounded-lg">
    带阴影的卡片
  </view>
</template>

最佳实践 ​

  1. 主题集成：优先使用主题中定义的颜色变量，确保品牌一致性
  2. 性能优化：避免过度使用复杂的阴影效果，特别是在移动设备上
  3. 可访问性：确保文本颜色与背景颜色有足够的对比度，以保证可读性
  4. 语义化：使用适当的光标样式来指示元素的交互性
  5. 一致性：在整个应用中保持样式的一致性，创建统一的视觉语言

自定义样式 ​

你可以通过 theme.json 配置文件添加自定义样式：

json
{
  "others": {
    "card": "background: #ffffff; border-radius: 8rpx; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);",
    "tooltip": "background: rgba(0, 0, 0, 0.8); color: white; padding: 8rpx 12rpx; border-radius: 4rpx;"
  }
}

然后在你的组件中使用这些自定义样式类：

vue
<template>
  <view class="other-card p-4">
    自定义卡片样式
  </view>
</template>