Badge 徽章

使用指南

气泡式徽章或者折角式徽章，用于提示

规则

• 请包裹着组件使用，与 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 class="sub-title">
      折角
    </p>
    <h3-badge text="促促促" corner>
      <div class="corner-badge">
        Use corner prop
      </div>
    </h3-badge>
    <br />
    <br />
    <h3-badge text="NEW" corner>
      <div class="corner-badge">
        Use corner prop
      </div>
    </h3-badge>
  </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;
  }
}
.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>

与h3-mobile-vue组件的区别以及迁移

新增组件

API

Prop

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

Event

事件名	说明	参数
-	-	-