qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Badge 徽标

在元素右上角展示消息提醒，可用于按钮等组件。

使用指南

在 Taro 文件中引入组件

import { AtBadge } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/badge.scss";

用法

<template>
  <AtBadge :value="10" :maxValue="99">
    <AtButton size='small'>按钮</AtButton>
  </AtBadge>
</template>

小红点与文本

<template>
  <view>
    <AtBadge dot>
    <AtButton size='small'>按钮</AtButton>
    </AtBadge>  
  
    <AtBadge value='NEW'>
        <AtButton size='small'>按钮</AtButton>
    </AtBadge>  
  
    <AtBadge value="···"
        <AtButton size='small'>按钮</AtButton>
    </AtBadge>
  </view>
</template>

Badge 参数

参数说明类型可选值默认值
dot角标红点Boolean-false
value角标内容String / Number--
maxValue角标最大值Number-99