需要设置成标签的元素加上 class 类名 cu-tag 即可
标签形状
css 代码
css
.cu-tag 默认
.cu-tag round 椭圆
.cu-tag radius 圆角演示代码
vue
<view class='cu-tag'>默认</view>
<view class='cu-tag round'>椭圆</view>
<view class='cu-tag radius'>圆角</view>标签尺寸
css 代码
css
.cu-tag sm 小尺寸
.cu-tag 默认演示代码
vue
<view class='cu-tag radius sm'>小尺寸</view>
<view class='cu-tag radius'>普通尺寸</view>标签颜色
css 代码
css
.bg-red 背景颜色 | .bg-...演示代码
vue
<view class="cu-tag bg-red">标签</view>镂空标签
.bg- 换成 .line-
css 代码
css
.line-red|...演示代码
vue
<view class="cu-tag line-red">标签</view>胶囊样式
父容器加样式 .cu-capsule，里面包裹需要的图标和标签
演示代码 可对比右侧预览
vue
<view class="cu-capsule">
<view class='cu-tag bg-red'>
<text class='cuIcon-likefill'></text>
</view>
<view class="cu-tag line-red">
12
</view>
</view>
<view class="cu-capsule round">
<view class='cu-tag bg-blue '>
<text class='cuIcon-likefill'></text>
</view>
<view class="cu-tag line-blue">
23
</view>
</view>
<view class="cu-capsule round">
<view class='cu-tag bg-blue '>
说明
</view>
<view class="cu-tag line-blue">
123
</view>
</view>
<view class="cu-capsule radius">
<view class='cu-tag bg-grey '>
<text class='cuIcon-likefill'></text>
</view>
<view class="cu-tag line-grey">
23
</view>
</view>
<view class="cu-capsule radius">
<view class='cu-tag bg-brown sm'>
<text class='cuIcon-likefill'></text>
</view>
<view class="cu-tag line-brown sm">
23
</view>
</view>数字标签
父容器一般为头像 cu-avatar，其中包裹标签，class 为 cu-tag badge，元素内部没有内容，则默认为红色圆点
演示代码 可对比右侧预览
vue
<view class='cu-avatar xl radius'>
港
<view class="cu-tag badge">99+</view>
</view>
<view class='cu-avatar xl radius' style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)">
<view class='cu-tag badge'>9</view>
</view>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99</view>
<text class='cuIcon-people'></text>
</view>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99+</view>
</view>