Badge (微标)
徽标组件用于显示数量提示或状态标识，支持多种尺寸、颜色和样式自定义，可显示数字、圆点或自定义内容，并支持数字溢出处理和零值显示控制。
支持平台
| 安卓 | ios | 鸿蒙 | web | 微信小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page main-class="p-30">
<t-card main-class="mb-30" title="Badge 徽标"
sub-title="徽标组件用于显示数量提示或状态标识，支持多种尺寸和显示方式，适用于消息提醒、购物车数量等场景。"></t-card>
<t-section main-class="mb-30" title="基础功能-type-size-effect展示"></t-section>
<t-row main-class="faic tdb tdr tdp mb-30">
<t-badge main-class="mr-15" text="99"></t-badge>
<t-badge main-class="mr-15" type="primary" size="small" text="9"></t-badge>
<t-badge main-class="mr-15" type="success" size="m" text="99"></t-badge>
<t-badge main-class="mr-15" type="error" size="l" text="99"></t-badge>
<t-badge main-class="mr-15" type="p" effect='l' size="l" text="99"></t-badge>
</t-row>
<t-section main-class="mb-30" title="自定义颜色酸疼主题"></t-section>
<t-row main-class="faic tdb tdr tdp mb-30">
<t-badge main-class="c-red plr-20 s-50 mr-10" type="success" text="99"></t-badge>
<t-badge main-class="bg-blue plr-20 s-45" type="success" text="99"></t-badge>
</t-row>
<t-section main-class="mb-30" title="自定义样式-直角边"></t-section>
<t-row main-class="faic tdb tdr tdp mb-30">
<t-badge main-class="r-50px,50px,50px,0 mr-15" text="86"></t-badge>
<t-badge main-class="r-50px,50px,0,50px mr-15" type="success" text="56"></t-badge>
<t-badge main-class="r-50px,0,50px,50px mr-15" type="error" text="45"></t-badge>
<t-badge main-class="r-0,50px,50px,50px mr-15" type="error" text="68"></t-badge>
<t-badge main-class="r-50px,50px,50px,0 mr-15" type="warning" text="73"></t-badge>
</t-row>
<t-section main-class="mb-30" title="显示圆点-主题size-自字义大小s-40"></t-section>
<t-row main-class="faic tdb tdr tdp mb-30">
<t-badge :dot="true" main-class="mr-15 s-40" type="error">1</t-badge>
<t-badge :dot="true" main-class="mr-15" size="large" type="success">1</t-badge>
<t-badge :dot="true" main-class="mr-15" size="medium" type="error">1</t-badge>
<t-badge :dot="true" main-class="mr-15" size="small" type="p">1</t-badge>
<t-badge :dot="true" main-class="mr-15" size="mini" type="warning">1</t-badge>
</t-row>
<t-section main-class="mb-30" title="微标数显示方式"></t-section>
<t-row main-class="faic tdb tdr tdp mb-30">
<t-badge mode="ellipsis" text="5132"></t-badge>
<t-badge type="primary" main-class="mr-15" mode="ellipsis" text="5132"></t-badge>
<t-badge type="success" main-class="mr-15" mode="overflow" text="1011"></t-badge>
<t-badge type="error" main-class="mr-15" mode="limit" text="1500"></t-badge>
<t-badge type="warning" main-class="mr-15" mode="limit" text="45187"></t-badge>
</t-row>
<t-section main-class="mb-30" title="定位"></t-section>
<t-row main-class="faic tdb tdr tdp mb-30">
<t-row main-class="bg-#ccc twh-100 r-10 ov dr mr-80 fais">
<t-badge type="error" main-class="da dr-n10 dt-n5" text="56556"></t-badge>
</t-row>
<t-row main-class="bg-#ccc twh-100 r-10 ov dr fais">
<t-badge type="error" main-class="da dr-n10 dt-n5" :dot="true" text="5132"></t-badge>
</t-row>
</t-row>
</t-page>
</template>属性
| 名称 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | mini | 组件尺寸 | large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你) |
| type | String | "" | 组件类型 | info(信息), primary(正常), error(错误), warning(警告), success(成功) |
| disabled | Boolean | false | 组件是否禁用 | false, true |
| stop | Boolean | false | 是否阻止事件冒泡（Tui统一写法处理事件冒泡） | false, true |
| hover | Boolean | true | 是否有点击效果 | false, true |
| path | String | "" | 点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。 | - |
| mainClass | String | "" | 组件根节点的样式 | - |
| nativeClass | String | "" | 组件根节点原生样式 | - |
| effect | String | "normal" | 组件显示主题 | normal(正常), dark(深色), light(浅色), plain(镂空) |
| size | String | mini | 徽标的主题尺寸 | |
| max | Number | 99 | 最大值 | |
| mode | String | overflow | 显示的模式 | overflow: 超过最大值后显示+ellipsis: 以...的形式显示limit: 数据的显示，显示如4.15K 4.15w |
| text | String | `` | 显示的值 | |
| dot | Boolean | false | 是否显示为圆点 |
事件
| 名称 | 返回参数 | 说明 |
|---|---|---|
| click | (e : UniPointerEvent) | - |