# t-badge

Badge 徽标

t-badge 组件介绍

t-badge 用于显示数量提示或状态标识，支持多种尺寸、颜色和样式自定义，可显示数字、圆点或自定义内容，并支持数字溢出处理和零值显示控制。常用于消息提醒、购物车数量、新通知标记等场景。

t-badge 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-badge 基础用法

基础用法参考 demo/badge/badge.uvue，通过 text 属性设置显示内容，通过 dot 属性切换为圆点模式。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15" title="Badge 徽标" sub-title="徽标组件用于显示数量提示或状态标识，支持多种尺寸和显示方式，适用于消息提醒、购物车数量等场景。"></t-card>
		<t-section class="mb-15" title="基础功能-type-size-effect展示"></t-section>
		<t-row class="faic r-10 p-10 mb-15">
			<t-badge class="mr-8" text="99"></t-badge>
			<t-badge class="mr-8" type="primary" size="small" text="9"></t-badge>
			<t-badge class="mr-8" type="success" size="m" text="99"></t-badge>
			<t-badge class="mr-8" type="error" size="l" text="99"></t-badge>
			<t-badge class="mr-8" type="p" effect='l' size="l" text="99"></t-badge>
		</t-row>
		<t-section class="mb-15" title="自定义颜色主题"></t-section>
		<t-row class="faic r-10 p-10 mb-15">
			<t-badge class="c-red plr-10 mr-5" type="success" text="99"></t-badge>
			<t-badge class="bg-blue plr-10" type="success" text="99"></t-badge>
		</t-row>
		<t-section class="mb-15" title="自定义样式-直角边"></t-section>
		<t-row class="faic r-10 p-10 mb-15">
			<t-badge class="r-50px,50px,50px,0 mr-8" text="86"></t-badge>
			<t-badge class="r-50px,50px,0,50px mr-8" type="success" text="56"></t-badge>
			<t-badge class="r-50px,0,50px,50px mr-8" type="error" text="45"></t-badge>
			<t-badge class="r-0,50px,50px,50px mr-8" type="error" text="68"></t-badge>
			<t-badge class="r-50px,50px,50px,0 mr-8" type="warning" text="73"></t-badge>
		</t-row>
		<t-section class="mb-15" title="显示圆点-主题size-自字义大小"></t-section>
		<t-row class="faic r-10 p-10 mb-15">
			<t-badge :dot="true" class="mr-8" size="large" type="success">1</t-badge>
			<t-badge :dot="true" class="mr-8" size="medium" type="error">1</t-badge>
			<t-badge :dot="true" class="mr-8" size="small" type="primary">1</t-badge>
			<t-badge :dot="true" class="mr-8" size="mini" type="warning">1</t-badge>
		</t-row>
		<t-section class="mb-15" title="微标数显示方式"></t-section>
		<t-row class="faic r-10 p-10 mb-15">
			<t-badge mode="ellipsis" text="5132"></t-badge>
			<t-badge type="primary" class="mr-8" mode="ellipsis" text="5132"></t-badge>
			<t-badge type="success" class="mr-8" mode="overflow" text="1011"></t-badge>
			<t-badge type="error" class="mr-8" mode="limit" text="1500"></t-badge>
			<t-badge type="warning" class="mr-8" mode="limit" text="45187"></t-badge>
		</t-row>
		<t-section class="mb-15" title="定位"></t-section>
		<t-row class="faic r-10 p-10 mb-15">
			<t-row class="bg-#ccc twh-50 r-5 ov dr mr-40 fais">
				<t-badge type="error" class="da dr-n5 dt-n3" text="56556"></t-badge>
			</t-row>
			<t-row class="bg-#ccc twh-50 r-5 ov dr fais">
				<t-badge type="error" class="da dr-n5 dt-n3" :dot="true" size="large" text="5132"></t-badge>
			</t-row>
		</t-row>
	</view>
</template>

t-badge Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'mini'
text	显示的值	string	''
dot	是否显示为圆点	boolean	false
max	最大值，超过后显示 +	number	99
mode	显示模式，可选 overflow（超出显示+）、ellipsis（显示...）、limit（显示k/w）	string	'overflow'
textClass	文本样式类，对应外部类 text-class	string	''
hideZero	值为 0 时是否隐藏徽标	boolean	true

t-badge Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

外部类

类名	说明
text-class	徽标文本样式