tui-badge 徽章 开源组件

介绍

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

引入

uni-app引入

第一种，手动引入（可全局引入）

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

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

uni-app版本平台差异说明

App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	App-Nvue
✓	✓	✓	✓	✓	✓	✓	升级中

微信小程序引入（可在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 值展示不同颜色，支持 primary 、warning 、green 、danger 、white 、black 、gray 、white_red。

<tui-badge>1</tui-badge>
<tui-badge type="warning">2</tui-badge>
<tui-badge type="green">3</tui-badge>

绝对定位

通过 absolute 属性设置定位，通过 top 、right 、translateX 属性来调整显示位置。

<!--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>

/* 注：外层容器需设置position为非static*/
.tui-badge-item {
	position: relative;
}

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

TIP

注：自v2.8.0起，主色支持全局配置。 详见全局配置文档

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序预览

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