• Badge徽标数
    • 何时使用
    • 代码演示
      • 基本
      • 独立使用
      • 封顶数字
      • 讨嫌的小红点
      • 状态点
      • 动态
      • 自定义标题
  • API

    Badge徽标数

    图标右上角的圆形徽标数字。

    何时使用

    一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。

    代码演示

    Badge 徽标数 - 图1

    基本

    简单的徽章展示,当 count0 时,默认不显示,但是可以使用 showZero 修改为显示。

    1. <template>
    2. <div>
    3. <a-badge count="5">
    4. <a href="#" class="head-example"></a>
    5. </a-badge>
    6. <a-badge count="0" showZero>
    7. <a href="#" class="head-example"></a>
    8. </a-badge>
    9. <a-badge>
    10. <a-icon slot="count" type="clock-circle" style="color: #f5222d" />
    11. <a href="#" class="head-example"></a>
    12. </a-badge>
    13. </div>
    14. </template>

    Badge 徽标数 - 图2

    独立使用

    不包裹任何元素即是独立使用,可自定样式展现。在右上角的 badge 则限定为红色。

    1. <template>
    2. <div>
    3. <a-badge count="25" />
    4. <a-badge
    5. count="4"
    6. :numberStyle="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"
    7. />
    8. <a-badge count="109" :numberStyle="{backgroundColor: '#52c41a'} " />
    9. </div>
    10. </template>

    Badge 徽标数 - 图3

    封顶数字

    超过 overflowCount 的会显示为 ${overflowCount}+,默认的 overflowCount99

    1. <template>
    2. <div>
    3. <a-badge :count="99">
    4. <a href="#" class="head-example"></a>
    5. </a-badge>
    6. <a-badge :count="100">
    7. <a href="#" class="head-example"></a>
    8. </a-badge>
    9. <a-badge :count="99" :overflowCount="10">
    10. <a href="#" class="head-example"></a>
    11. </a-badge>
    12. <a-badge :count="1000" :overflowCount="999">
    13. <a href="#" class="head-example"></a>
    14. </a-badge>
    15. </div>
    16. </template>

    Badge 徽标数 - 图4

    讨嫌的小红点

    没有具体的数字。

    1. <template>
    2. <div id="components-badge-demo-dot">
    3. <a-badge dot>
    4. <a-icon type="notification" />
    5. </a-badge>
    6. <a-badge :count="0" dot>
    7. <a-icon type="notification" />
    8. </a-badge>
    9. <a-badge dot>
    10. <a href="#">Link something</a>
    11. </a-badge>
    12. </div>
    13. </template>
    14. <style scoped>
    15. #components-badge-demo-dot .anticon-notification {
    16. width: 16px;
    17. height: 16px;
    18. line-height: 16px;
    19. font-size: 16px;
    20. }
    21. </style>

    Badge 徽标数 - 图5

    状态点

    用于表示状态的小圆点。

    1. <template>
    2. <div>
    3. <a-badge status="success" />
    4. <a-badge status="error" />
    5. <a-badge status="default" />
    6. <a-badge status="processing" />
    7. <a-badge status="warning" />
    8. <br />
    9. <a-badge status="success" text="Success" />
    10. <br />
    11. <a-badge status="error" text="Error" />
    12. <br />
    13. <a-badge status="default" text="Default" />
    14. <br />
    15. <a-badge status="processing" text="Processing" />
    16. <br />
    17. <a-badge status="warning" text="warning" />
    18. </div>
    19. </template>

    Badge 徽标数 - 图6

    动态

    展示动态变化的效果。

    1. <template>
    2. <div>
    3. <div>
    4. <a-badge :count="count">
    5. <a href="#" class="head-example" />
    6. </a-badge>
    7. <a-button-group>
    8. <a-button @click="decline">
    9. <a-icon type="minus" />
    10. </a-button>
    11. <a-button @click="increase">
    12. <a-icon type="plus" />
    13. </a-button>
    14. </a-button-group>
    15. </div>
    16. <div style="margin-top: 10px">
    17. <a-badge :dot="show">
    18. <a href="#" class="head-example" />
    19. </a-badge>
    20. <a-switch v-model="show" />
    21. </div>
    22. </div>
    23. </template>
    24. <script>
    25. export default {
    26. data() {
    27. return {
    28. count: 5,
    29. show: true,
    30. };
    31. },
    32. methods: {
    33. decline() {
    34. let count = this.count - 1;
    35. if (count < 0) {
    36. count = 0;
    37. }
    38. this.count = count;
    39. },
    40. increase() {
    41. this.count++;
    42. },
    43. },
    44. };
    45. </script>

    Badge 徽标数 - 图7

    自定义标题

    设置鼠标放在状态点上时显示的文字

    1. <template>
    2. <div id="components-badge-demo-title">
    3. <a-badge :count="5" title="Custom hover text">
    4. <a href="#" class="head-example" />
    5. </a-badge>
    6. </div>
    7. </template>
    8. <style scoped>
    9. #components-badge-demo-title .ant-badge:not(.ant-badge-status) {
    10. margin-right: 20px;
    11. }
    12. .head-example {
    13. width: 42px;
    14. height: 42px;
    15. border-radius: 4px;
    16. background: #eee;
    17. display: inline-block;
    18. }
    19. </style>

    API

    1. <a-badge :count="5">
    2. <a href="#" class="head-example" />
    3. </a-badge>
    1. <a-badge :count="5" />
    参数说明类型默认值
    count展示的数字,大于 overflowCount 时显示为 ${overflowCount}+,为 0 时隐藏number | string | slot
    dot不展示数字,只有一个小红点booleanfalse
    offset设置状态点的位置偏移,格式为 [x, y][number|string, number|string]-
    overflowCount展示封顶的数字值number99
    showZero当数值为 0 时,是否展示 Badgebooleanfalse
    status设置 Badge 为状态点Enum{ 'success', 'processing, 'default', 'error', 'warning' }''
    text在设置了 status 的前提下有效,设置状态点的文本string''
    numberStyle设置状态点的样式object''
    title设置鼠标放在状态点上时显示的文字stringcount