Badge 徽标数

概述

主要用于通知未读数的角标,提醒用户点击。

代码示例

Badge 徽标数 - 图1

基础用法

最简单的使用方法。

  1. <style scoped>
  2. .demo-badge{
  3. width: 42px;
  4. height: 42px;
  5. background: #eee;
  6. border-radius: 6px;
  7. display: inline-block;
  8. }
  9. </style>
  10. <template>
  11. <Badge :count="3">
  12. <a href="#" class="demo-badge"></a>
  13. </Badge>
  14. </template>
  15. <script>
  16. export default {
  17. }
  18. </script>

Badge 徽标数 - 图2

小红点

强迫症患者慎用!

  1. <template>
  2. <Badge dot>
  3. <a href="#" class="demo-badge"></a>
  4. </Badge>
  5. <Badge dot>
  6. <Icon type="ios-notifications-outline" size="26"></Icon>
  7. </Badge>
  8. <Badge dot>
  9. <a href="#">可以是一个链接</a>
  10. </Badge>
  11. </template>
  12. <script>
  13. export default {
  14. }
  15. </script>

Badge 徽标数 - 图3

封顶数字

通过设置overflow-count属性设置一个封顶值,当超过时,会显示${overflowCount}+

  1. <template>
  2. <Badge :count="100">
  3. <a href="#" class="demo-badge"></a>
  4. </Badge>
  5. <Badge :count="1000" overflow-count="999">
  6. <a href="#" class="demo-badge"></a>
  7. </Badge>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>

Badge 徽标数 - 图4

独立使用及自定义样式

可以没有 slot 独立展示。

  1. <style>
  2. .demo-badge-alone{
  3. background: #5cb85c !important;
  4. }
  5. </style>
  6. <template>
  7. <Badge :count="10"></Badge>
  8. <Badge :count="20" class-name="demo-badge-alone"></Badge>
  9. </template>
  10. <script>
  11. export default {
  12. }
  13. </script>

Badge 徽标数 - 图5

自定义内容

设置 text 属性,可以自定义显示内容。

  1. <template>
  2. <Row>
  3. <Col span="6">
  4. <Badge text="new">
  5. <a href="#" class="demo-badge"></a>
  6. </Badge>
  7. </Col>
  8. <Col span="6">
  9. <Badge text="hot">
  10. <a href="#" class="demo-badge"></a>
  11. </Badge>
  12. </Col>
  13. </Row>
  14. </template>
  15. <script>
  16. export default {
  17. }
  18. </script>

Badge 徽标数 - 图6

状态点

用于表示状态的小圆点。

  1. <template>
  2. <Badge status="success" />
  3. <Badge status="error" />
  4. <Badge status="default" />
  5. <Badge status="processing" />
  6. <Badge status="warning" />
  7. <br />
  8. <Badge status="success" text="Success" />
  9. <br />
  10. <Badge status="error" text="Error" />
  11. <br />
  12. <Badge status="default" text="Default" />
  13. <br />
  14. <Badge status="processing" text="Processing" />
  15. <br />
  16. <Badge status="warning" text="Warning" />
  17. </template>
  18. <script>
  19. export default {
  20. }
  21. </script>

Badge 徽标数 - 图7

预设颜色

使用 type 属性,可以设置不同的颜色。

  1. <template>
  2. <Badge :count="5" type="primary">
  3. <a href="#" class="demo-badge"></a>
  4. </Badge>
  5. <Badge :count="5" type="success">
  6. <a href="#" class="demo-badge"></a>
  7. </Badge>
  8. <Badge :count="5" type="normal">
  9. <a href="#" class="demo-badge"></a>
  10. </Badge>
  11. <Badge :count="5" type="info">
  12. <a href="#" class="demo-badge"></a>
  13. </Badge>
  14. <Badge :count="5" type="error">
  15. <a href="#" class="demo-badge"></a>
  16. </Badge>
  17. <Badge :count="5" type="warning">
  18. <a href="#" class="demo-badge"></a>
  19. </Badge>
  20. </template>
  21. <script>
  22. export default {
  23. }
  24. </script>

API

Badge props

属性说明类型默认值
count显示的数字,大于overflowCount时,显示${overflowCount}+,为 0 时隐藏Number-
overflow-count展示封顶的数字值Number | String99
dot不展示数字,只有一个小红点,如需隐藏 dot ,需要设置count为 0 Booleanfalse
class-name自定义的class名称,dot 模式下无效String-
type使用预设的颜色,可选值为 success、primary、normal、error、warning、infoString-
show-zero当数值为 0 时,是否展示 BadgeBooleanfalse
status设置 Badge 为状态点,可选值为 success、processing、default、error、warningString-
text自定义内容,如果设置了 status,则为状态点的文本String-
offset设置状态点的位置偏移,格式为 [x, y]Array-