Badge 角标

17:06

说明

在宿主元素右上角叠加数字角标或圆点提示。提供默认插槽包裹内容时组件自带定位锚点，角标自动贴右上角；不传内容则作为独立角标，叠加到宿主的相对定位容器上。数值超过 overflow-count 时按封顶值加 + 显示（如 99+），为 0 且未开启 show-zero 时隐藏。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

count 传入数值，超过封顶值时按 overflow-count 显示为 99+。

查看源码

vue

<template>
    <view class="row">
        <ux-badge :count="5" custom-class="badge-item">
            <view class="box"><text class="text">消息</text></view>
        </ux-badge>
        <ux-badge :count="99" custom-class="badge-item">
            <view class="box"><text class="text">消息</text></view>
        </ux-badge>
        <ux-badge :count="200" custom-class="badge-item">
            <view class="box"><text class="text">消息</text></view>
        </ux-badge>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.badge-item {
    margin-right: 20px;
    margin-bottom: 15px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text {
    font-size: 13px;
    color: #909399;
}
</style>

预设类型 type

type 切换预设背景色：error（默认）/ primary / success / warning / info。

查看源码

vue

<template>
    <view class="row">
        <ux-badge
            v-for="(item, index) in typeList"
            :key="index"
            :type="item.type"
            :count="8"
            custom-class="badge-item"
        >
            <view class="box"><text class="text">{{ item.label }}</text></view>
        </ux-badge>
    </view>
</template>

<script setup lang="uts">
const typeList = [
    { type: 'error', label: 'error' },
    { type: 'primary', label: 'primary' },
    { type: 'success', label: 'success' },
    { type: 'warning', label: 'warning' },
    { type: 'info', label: 'info' }
];
</script>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.badge-item {
    margin-right: 20px;
    margin-bottom: 15px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text {
    font-size: 13px;
    color: #909399;
}
</style>

圆点模式 is-dot

is-dot 只显示一个小圆点、不展示数值，常配合 is-center 用于消息提醒。

查看源码

vue

<template>
    <view class="row">
        <ux-badge :is-dot="true" is-center custom-class="badge-item">
            <view class="box"><text class="text">消息</text></view>
        </ux-badge>
        <ux-badge :is-dot="true" type="primary" is-center custom-class="badge-item">
            <view class="box"><text class="text">通知</text></view>
        </ux-badge>
        <ux-badge :is-dot="true" type="warning" is-center custom-class="badge-item">
            <view class="box"><text class="text">提醒</text></view>
        </ux-badge>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.badge-item {
    margin-right: 20px;
    margin-bottom: 15px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text {
    font-size: 13px;
    color: #909399;
}
</style>

迷你尺寸 size="mini"

size="mini" 得到小一号角标（整体缩放 0.8）。

查看源码

vue

<template>
    <view class="row">
        <ux-badge :count="5" custom-class="badge-item">
            <view class="box"><text class="text">默认</text></view>
        </ux-badge>
        <ux-badge :count="5" size="mini" custom-class="badge-item">
            <view class="box"><text class="text">mini</text></view>
        </ux-badge>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.badge-item {
    margin-right: 20px;
    margin-bottom: 15px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text {
    font-size: 13px;
    color: #909399;
}
</style>

封顶值 overflow-count

overflow-count 自定义封顶值，超过时按封顶值加 + 显示。

查看源码

vue

<template>
    <view class="row">
        <ux-badge :count="100" :overflow-count="99" custom-class="badge-item">
            <view class="box"><text class="text">99+</text></view>
        </ux-badge>
        <ux-badge :count="10" :overflow-count="9" custom-class="badge-item">
            <view class="box"><text class="text">9+</text></view>
        </ux-badge>
        <ux-badge :count="1000" :overflow-count="999" custom-class="badge-item">
            <view class="box"><text class="text">999+</text></view>
        </ux-badge>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.badge-item {
    margin-right: 20px;
    margin-bottom: 15px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text {
    font-size: 13px;
    color: #909399;
}
</style>

显示零值 show-zero

count=0 且 show-zero=false（默认）时角标隐藏，置为 true 才显示 0。

查看源码

vue

<template>
    <view class="row">
        <ux-badge :count="0" :show-zero="false" custom-class="badge-item">
            <view class="box"><text class="text">隐藏0</text></view>
        </ux-badge>
        <ux-badge :count="0" :show-zero="true" custom-class="badge-item">
            <view class="box"><text class="text">显示0</text></view>
        </ux-badge>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.badge-item {
    margin-right: 20px;
    margin-bottom: 15px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text {
    font-size: 13px;
    color: #909399;
}
</style>

自定义颜色

bg-color / color / font-size 覆盖角标背景、文字色与字号，其中 bg-color 优先级高于 type。

查看源码

vue

<template>
    <view class="row">
        <ux-badge :count="8" bg-color="#7232dd" color="#ffffff" custom-class="badge-item">
            <view class="box"><text class="text">自定义</text></view>
        </ux-badge>
        <ux-badge :count="16" bg-color="#19be6b" color="#ffffff" custom-class="badge-item">
            <view class="box"><text class="text">自定义</text></view>
        </ux-badge>
        <ux-badge :count="3" bg-color="#ff9900" color="#ffffff" font-size="16" custom-class="badge-item">
            <view class="box"><text class="text">自定义</text></view>
        </ux-badge>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.badge-item {
    margin-right: 20px;
    margin-bottom: 15px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text {
    font-size: 13px;
    color: #909399;
}
</style>

位置偏移 offset

offset 为 [top, right] 偏移量（单位px），控制角标相对宿主的定位。

查看源码

vue

<template>
    <view class="row">
        <view class="demo">
            <ux-badge :count="5" :offset="[0, 0]">
                <view class="box"><text class="text">基准</text></view>
            </ux-badge>
            <text class="label">[0, 0]</text>
        </view>
        <view class="demo">
            <ux-badge :count="5" :offset="[-5, -5]">
                <view class="box"><text class="text">凸出</text></view>
            </ux-badge>
            <text class="label">[-10, -10]</text>
        </view>
        <view class="demo">
            <ux-badge :count="5" :offset="[8, 15]">
                <view class="box"><text class="text">向内</text></view>
            </ux-badge>
            <text class="label">[15, 30]</text>
        </view>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 25px;
    margin-bottom: 15px;
    flex-shrink: 0;
    overflow: visible;
}
.label {
    font-size: 11px;
    color: #c8c9cc;
    margin-top: 10px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.text {
    font-size: 13px;
    color: #909399;
    white-space: nowrap;
}
</style>

中心点重合 is-center

is-center 让角标中心点与父容器右上角重合，此时 offset 失效。

查看源码

vue

<template>
    <view class="row">
        <ux-badge :count="5" :offset="[-5, -5]" custom-class="badge-item">
            <view class="box"><text class="text">普通</text></view>
        </ux-badge>
        <ux-badge :count="5" :is-center="true" custom-class="badge-item">
            <view class="box"><text class="text">居中</text></view>
        </ux-badge>
        <ux-badge :is-dot="true" :is-center="true" type="primary" custom-class="badge-item">
            <view class="box"><text class="text">圆点</text></view>
        </ux-badge>
    </view>
</template>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.badge-item {
    margin-right: 20px;
    margin-bottom: 15px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text {
    font-size: 13px;
    color: #909399;
}
</style>

双模式用法

默认插槽包裹内容时角标自动贴右上角；不传内容则作为独立角标，叠加到宿主的相对定位容器上。

查看源码

vue

<template>
    <view class="dual">
        <view class="card">
            <text class="mode">包裹模式</text>
            <ux-badge :count="3" :offset="[-5, -5]">
                <view class="box"><text class="text">消息</text></view>
            </ux-badge>
            <text class="desc">内容放默认插槽，组件自带定位锚点，角标自动置于右上角，宿主零配置</text>
        </view>
        <view class="card">
            <text class="mode">单用模式</text>
            <view class="host">
                <view class="box"><text class="text">消息</text></view>
                <ux-badge :count="3" :offset="[-5, -5]"></ux-badge>
            </view>
            <text class="desc">不传内容，作为独立角标叠加到宿主的相对定位右上角</text>
        </view>
    </view>
</template>

<style scoped>
.dual {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
}
.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 25px;
    margin-bottom: 15px;
    flex-shrink: 0;
    overflow: visible;
}
.mode {
    font-size: 12px;
    color: #606266;
    margin-bottom: 8px;
}
.desc {
    font-size: 11px;
    color: #c8c9cc;
    margin-top: 8px;
}
.box {
    width: 60px;
    height: 60px;
    background-color: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.text {
    font-size: 13px;
    color: #909399;
    white-space: nowrap;
}
.host {
    /* 单用模式需宿主自行提供定位锚点 */
    position: relative;
    overflow: visible;
}
</style>

非绝对定位 absolute=false

absolute=false 关闭绝对定位，角标作为行内元素随内容排布，offset 不再生效。

查看源码

vue

<template>
    <view class="inline-row">
        <text>未读消息</text>
        <ux-badge :count="12" :absolute="false" custom-class="badge-inline"></ux-badge>
    </view>
    <view class="inline-row">
        <text>新通知</text>
        <ux-badge :is-dot="true" :absolute="false" type="success" custom-class="badge-inline"></ux-badge>
    </view>
</template>

<style scoped>
.inline-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}
.badge-inline {
    margin-left: 8px;
}
</style>

API

Props

属性	说明	类型	默认值	版本
`customStyle`	自定义根节点样式	`string \| UTSJSONObject`	`-`	-
`customClass`	自定义根节点样式类	`string`	`''`	-
`type`	使用预设的背景颜色 primary,warning,success,error,info	`ThemeType`	`'error'`	-
`size`	Badge的尺寸，default, mini	`BadgeSize`	`'default'`	-
`isDot`	是否是圆点	`boolean`	`false`	-
`count`	显示的数值内容	`string \| number`	`null`	-
`overflowCount`	展示封顶数字值	`number`	`99`	-
`showZero`	当数值为 0 时，是否展示 Badge	`boolean`	`false`	-
`offset`	位置偏移 [number, number]	`number[]`	`-`	-
`absolute`	是否开启绝对定位，开启了offset才起作用	`boolean`	`true`	-
`fontSize`	字体大小	`string \| number`	`DEFAULT_FONT_SIZE`	-
`color`	字体颜色	`string`	`''`	-
`bgColor`	badge的背景颜色	`string`	`''`	-
`isCenter`	是否让badge组件的中心点和父组件右上角重合，配置的话offset将会失效	`boolean`	`false`	-

Events

ux-badge 无事件。

Slots

插槽名	说明	版本
`default`	包裹模式：放置被角标标注的宿主内容（提供后组件自带定位锚点，角标自动定位右上角）	-
`content`	自定义角标内部内容，替换默认的数值文本	-

注意事项

两种用法：提供默认插槽时为「包裹模式」，组件自带 relative + overflow: visible 锚点，角标自动贴右上角；不提供时为「单用/叠加模式」，需宿主自行 position: relative 作为定位锚点。
is-center 优先级高于 offset：为 true 时角标中心点与父容器右上角重合，offset 失效。
bg-color 优先级高于 type，设置后 type 预设背景色失效。
is-dot=true 时角标恒显并忽略 count 与 overflow-count；count 为 0 且 show-zero=false 时角标整体隐藏。
count 超过 overflow-count（默认 99）时按封顶值加 + 显示（如 99+）。
absolute=false（且未提供默认插槽）时角标不做绝对定位，offset 不再生效，角标按行内元素随内容排布。
角标需凸出宿主时依赖 overflow: visible：组件已在包裹层与角标节点显式声明，单用模式下宿主容器若自行裁剪仍会切掉角标。

Badge 角标 ​

说明 ​

兼容性 ​

示例 ​

基础用法 ​

预设类型 type ​

圆点模式 is-dot ​

迷你尺寸 size="mini" ​

封顶值 overflow-count ​

显示零值 show-zero ​

自定义颜色 ​

位置偏移 offset ​

中心点重合 is-center ​

双模式用法 ​

非绝对定位 absolute=false ​

API ​

Props ​

Events ​

Slots ​

注意事项 ​

Badge 角标

说明

兼容性

示例

基础用法

预设类型 type

圆点模式 is-dot

迷你尺寸 size="mini"

封顶值 overflow-count

显示零值 show-zero

自定义颜色

位置偏移 offset

中心点重合 is-center

双模式用法

非绝对定位 absolute=false

API

Props

Events

Slots

注意事项