Badge 徽章

使用指南

一般用法

容器元素为inline-block

<tms-badge count="{{count}}">
    <view class="badge-body">实际元素</view>
</tms-badge>

Component({
    data: {
        count: 9
    },
})

 .badge-body {
    width: 60px;
    height: 60px;
    line-height: 60px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.8);
}

设定数值上限（默认999）

<tms-badge count="{{200}}" overflow-anchor="{{99}}">
    <view class="content">实际元素</view>
</tms-badge>

自定义文本内容

<tms-badge text="hot">
    <view class="content">实际元素</view>
</tms-badge>

显示图片icon

<tms-badge image="IMAGE_SRC">
    <view class="badge-body">实际元素</view>
</tms-badge>

红点模式，并设置红点样式

<tms-badge dot-mode
           custom-style="background:#4187F2;width:15px;height:15px;">
    <view class="badge-body">实际元素</view>
</tms-badge>

无slot--仅显示badge

<tms-badge count="{{100}}">
</tms-badge>

API

属性	说明	类型	默认值	版本
count	右上角的数字数值	number	-
overflow-anchor	数值上限，超过时显示上限+	number	999
custom-style	定义容器元素的style	string
image	图片icon链接	string	-
text	自定义文本内容	string	-
dot-mode	红点模式	boolean	false

dot-mode、image、text、count 几种形态按前后优先级排列，当定义了更高优先级的内容，低优先级的则无效。

EVENTS

属性	说明	类型
bind:click	点击badge时的回调	(event) => {}

CSS变量

// 徽标背景色
--badge-bg-color: #3F82FF;
// 徽标文字颜色
--badge-text-color: #FFF;

FAQ