# tui-badge 徽章

介绍

可设置成圆点或数字角标,支持缩放以及定位设置。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiBadge from "@/components/thorui/tui-badge/tui-badge"
export default {
	components:{
		tuiBadge
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-badge": "/components/thorui/tui-badge/tui-badge"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

无内容,显示圆点

通过 dot 属性设置为圆点。

<tui-badge dot></tui-badge>
<tui-badge dot type="warning"></tui-badge>
<tui-badge dot type="green"></tui-badge>
无内容,设置圆点大小

通过 scaleRatio 属性设置大小。

<!--uni-app-->
<tui-badge dot :scaleRatio="1"></tui-badge>
<tui-badge dot type="warning" :scaleRatio="1.2"></tui-badge>
<tui-badge dot type="green" :scaleRatio="0.8"></tui-badge>

<!--微信小程序-->
<tui-badge dot scaleRatio="{{1}}"></tui-badge>
<tui-badge dot type="warning" scaleRatio="{{1.2}}"></tui-badge>
<tui-badge dot type="green" scaleRatio="{{0.8}}"></tui-badge>
数字角标

可设置不同 type 值展示不同颜色,支持 primarywarninggreendangerwhiteblackgraywhite_red

<tui-badge>1</tui-badge>
<tui-badge type="warning">2</tui-badge>
<tui-badge type="green">3</tui-badge>
绝对定位

通过 absolute 属性设置定位,通过 toprighttranslateX 属性来调整显示位置。

<!--uni-app-->
<view class="tui-badge-item">
  <tui-icon name="message"></tui-icon>
  <tui-badge type="danger" absolute :scaleRatio="0.8" translateX="40%" top="-6rpx">9</tui-badge>
</view>

<!--微信小程序-->
<view class="tui-badge-item">
  <tui-icon name="message"></tui-icon>
  <tui-badge type="danger" absolute scaleRatio="{{0.8}}" translateX="40%" top="-6rpx">9</tui-badge>
</view>

# Slots

名称 说明
default 标签显示内容,可设置数字或者自定义内容

# Props

参数 类型 说明 默认值
type String 样式类型,可传入[primary,warning,green,danger,white,black,gray,white_red]等 primary
dot Boolean 是否是圆点,不显内容 false
margin String 外边距值 0
absolute Boolean 是否绝对定位 false
top String top值,定位下生效 -8rpx
right String right值,定位下生效 0
scaleRatio Number 缩放比例 1
translateX Number 水平方向移动距离 0

# Events

事件名 说明 回调参数
click 点击事件,点击标签时触发 {}

# 预览

# 线上程序预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码