Badge 徽标

使用指南

图标右上角的红点、数字或者文字。用于告知用户状态变化或者标示待处理事项的数量。

徽标类型

1. 圆点徽标： 图形提示
2. 计数徽标: 最大数量,默认显示为99，超出则显示99+
3. 文字徽标: 文字数量最多为8个以内

规则

• 请包裹着组件使用，与 h3-tag 区别开来

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      圆点徽标
    </p>
    <h3-badge dot>
      <span class="badge-block"></span>
    </h3-badge>
    <p class="sub-title">
      计数徽标
    </p>
    <div class="badge-box">
      <h3-badge :text="1">
        <span class="badge-block"></span>
      </h3-badge>
      1条信息
    </div>
    <div class="badge-box">
      <h3-badge :text="100">
        <span class="badge-block"></span>
      </h3-badge>
      超过99，默认99+
    </div>
    <div class="badge-box">
      <h3-badge :text="100" :limit="50">
        <span class="badge-block"></span>
      </h3-badge>
      自定义限制数
    </div>
    <p class="sub-title">
      文本
    </p>
    <div class="badge-box">
      <h3-badge text="NEW">
        <span class="badge-block"></span>
      </h3-badge>
      文本
    </div>
    <p>文字数量最多为8个以内</p>
    <div class="badge-box" style="margin-left: 50px">
      <h3-badge text="文字内容最大数量">
        <!-- <span class="badge-block"></span> -->
      </h3-badge>
      <!-- 文字数量最多为8个以内 -->
    </div>
  </div>
</template>

<script>
import H3Badge from '@/components/h3-badge/';
export default {
  components: {
    H3Badge,
  },
};
</script>

<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px 0;
  }
}
.corner-badge {
  height: 50px;
  width: calc(100vw - 30px);
  background: #ddd;
  display: inline-block;
}
.badge-block {
  width: 26px;
  height: 26px;
  background: #ddd;
  display: inline-block;
}
.badge-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的徽标组件规范修改相关样式

若要做迁移请参考

1. 弃用的props：corner

API

Prop

属性	说明	类型	默认值
dot	是否展示小点	bootean	false
text	提示文本，若为数字则可以被limit限制	string|number	-
limit	限制text展示，若超过则为显示 ${limit}+	number	99

Event

事件名	说明	参数
-	-	-