T-UVUE-UI1.0.0

Appearance

t-badge 微标 ​

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

html
<template>
	<t-page title="徽标">
		<t-card class="mlrt.30" title="Badge 徽标" sub-title="徽标组件用于显示数量提示或状态标识，支持多种尺寸和显示方式，适用于消息提醒、购物车数量等场景。"></t-card>
		<t-group title="默认+主题">
			<t-row>
				<t-badge class="mr.15">99</t-badge>
				<t-badge class="mr.15" type="primary" size="small">9</t-badge>
				<t-badge class="mr.15" type="success" size="m">99</t-badge>
				<t-badge class="mr.15" type="error" size="l">99</t-badge>
				<t-badge class="mr.15" type="p" effect='l' size="l">99</t-badge>
			</t-row>
		</t-group>
		<t-group title="自定义样式覆盖主题" content-class="fais">
			<t-badge class="c.red-plr.20" style="font-size: 50rpx;" type="success">99</t-badge>
		</t-group>
		<t-group title="直角边">
			<t-row>
				<t-badge class="r.50px,50px,50px,0-mr.15">86</t-badge>
				<t-badge class="r.50px,50px,50px,0-mr.15" type="success">56</t-badge>
				<t-badge class="r.50px,50px,50px,0-mr.15" type="error">45</t-badge>
				<t-badge class="r.50px,50px,50px,0-mr.15" type="error">68</t-badge>
				<t-badge class="r.50px,50px,50px,0-mr.15" type="warning">73</t-badge>
			</t-row>
		</t-group>
		<t-group title="显示圆点">
			<t-row class="faic">
				<t-badge :isDot="true" class="mr.15" type="success">1</t-badge>
				<t-badge :isDot="true" class="mr.15-s.24" type="error">1</t-badge>
				<t-badge :isDot="true" class="mr.15-s.26" type="p">1</t-badge>
				<t-badge :isDot="true" class="mr.15-s.28" type="warning">1</t-badge>
				<t-badge :isDot="true" class="mr.15-s.30" type="error">1</t-badge>
			</t-row>
		</t-group>
		<t-group title="自定义背景和颜色覆盖主题默认颜色">
			<t-row class="faic">
				<t-badge class="bg.#f9ae3d-c.#d9ffc7-mr.15">1</t-badge>
				<t-badge class="bg.#5ac725-c.#ffff00-mr.15">1</t-badge>
				<t-badge class="bg.#3c9cff-c.#ff0000-mr.15">1</t-badge>
			</t-row>
		</t-group>
		<t-group title="当数字为零的时候也显示-值为空不显示">
			<t-row class="faic">
				<t-badge class="mr.15" type="primary" :showZero="false">0</t-badge>
				<t-badge class="mr.15" type="success" :showZero="true">0</t-badge>
				<t-badge class="mr.15" type="error"></t-badge>
				<t-badge class="mr.15" type="warning" :showZero="true">0</t-badge>
			</t-row>
		</t-group>
		<t-group title="微标数显示方式">
			<t-row class="faic">
				<t-badge numberType="ellipsis">5132</t-badge>
				<t-badge type="primary" class="mr.15" numberType="ellipsis">5132</t-badge>
				<t-badge type="success" class="mr.15" numberType="overflow">1011</t-badge>
				<t-badge type="error" class="mr.15" numberType="limit">1500</t-badge>
				<t-badge type="warning" class="mr.15" numberType="limit">45187</t-badge>
			</t-row>
		</t-group>
		<t-group title="定位">
			<t-row class="fl-ov-mt.50-p.30">
				<t-row class="bg.#ccc-w.100-h.100-r.10-ov-dx-mr.80">
					<t-badge type="error" class="da-dr.10.1-dt.5.1">56556</t-badge>
				</t-row>
				<t-row class="bg.#ccc-w.100-h.100-r.10-ov-dx">
					<t-badge type="error" class="da-dr.10.1-dt.5.1" :isDot="true">5132</t-badge>
				</t-row>
			</t-row>
		</t-group>
	</t-page>
</template>

Props ​

名称描述类型默认值可选值
size徽标的尺寸String'mini''large', 'medium', 'small', 'mini'
isDot是否显示为圆点Booleanfalsetrue, false
max显示的最大数值Number99-
showZero数量为0时是否显示徽标Booleanfalsetrue, false
numberType数值显示类型String'overflow''overflow', 'ellipsis', 'limit'

Events ​

事件名描述回调参数版本
----

Slots ​

名称描述
default默认插槽，用于放置徽标内容