Badge 徽标

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

基础用法

设置 属性后，Badge 会在子元素的右上角显示对应的徽标，也可以通过 dot 来显示小红点。

  1. <van-badge :content="5">
  2.   <div class="child" />
  3. <van-badge :content="10">
  4.   <div class="child" />
  5. </van-badge>
  6. <van-badge content="Hot">
  7.   <div class="child" />
  8. </van-badge>
  9. <van-badge dot>
  10.   <div class="child" />
  11. </van-badge>
  13. <style>
  15.     width: 40px;
  16.     height: 40px;
  17.     background: #f2f3f5;
  18.   }
  19. </style>

自定义颜色

通过 color 属性来设置徽标的颜色。

  1. <van-badge :content="5" color="#1989fa">
  2.   <div class="child" />
  3. </van-badge>
  4. <van-badge :content="10" color="#1989fa">
  5.   <div class="child" />
  7. <van-badge dot color="#1989fa">
  8.   <div class="child" />
  9. </van-badge>

自定义徽标内容

通过 content 插槽可以自定义徽标的内容，比如插入一个图标。

  1. .badge-icon {
  2.   display: block;
  3.   font-size: 10px;
  4.   line-height: 16px;

Props

Slots

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。