Badge 徽标

引入

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

基础用法

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

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

最大值

  1. <van-badge :content="20" max="9">
  2.   <div class="child" />
  3. </van-badge>
  4. <van-badge :content="50" max="20">
  5.   <div class="child" />
  6. </van-badge>
  7. <van-badge :content="200" max="99">
  8.   <div class="child" />
  9. </van-badge>

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

自定义徽标内容

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

  1. <van-badge>
  2.   <div class="child" />
  3.     <van-icon name="success" class="badge-icon" />
  4.   </template>
  5. </van-badge>
  6. <van-badge>
  7.   <div class="child" />
  8.   <template #content>
  9.     <van-icon name="cross" class="badge-icon" />
  10.   </template>
  11. </van-badge>
  12. <van-badge>
  14.   <template #content>
  15.     <van-icon name="down" class="badge-icon" />
  16.   </template>
  17. </van-badge>
  1. .badge-icon {
  2.   display: block;
  3.   font-size: 10px;
  4.   line-height: 16px;
  5. }

自定义徽标位置

独立展示

当 Badge 没有子元素时，会作为一个独立的元素进行展示。

  1. <van-badge :content="20" />
  3. <van-badge :content="200" max="99" />

Slots

类型定义

组件导出以下类型定义：

    样式变量