Badge 徽标数

一、概述

定义

通过红点、数字或自定义标识提示用户消息状态情况。

使用场景

• 一般出现在图标、文字或头像的右上角，用于提示用户
• 通过醒目视觉形式吸引用户注意。

类型

• 红点
• 数字
• 自定义

二、红点

通过红点提示用户。

交互说明

• 不单独使用，通过和其他元素配合使用
• 当用户对提示信息进行处理后，红点消失

<se-badge isDot>
  <a href="#" class="se-example"></a>
</se-badge>
<style>
  .se-example {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #999;
  }
</style>

三、数字

通过数字提示用户，待处理信息的条数。

交互说明

1.不单独使用，通过和其他元素配合使用 2.待处理的信息处理完成后，数字对应减少

<se-badge :value="6" @click="click">
  <a href="#" class="se-example"></a>
</se-badge>
<se-badge :value="86">
  <a href="#" class="se-example"></a>
</se-badge>
<se-badge :value="100" :max="99">
  <a href="#" class="se-example"></a>
</se-badge>
<style>
  .se-badge {
    margin-right: 40px;
  }
  .se-example {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #999;
  }
</style>
<script>
  export default {
    methods: {
      click() {
        console.log('badge')
      }
    }
  }
</script>

四、自定义

可自定义其他字符展示，常见的有 hot、new 等。

交互说明

1.不单独使用，通过和其他元素配合使用 2.可自定义其他字符展示。

<se-badge value="HOT">
  <a href="#" class="se-example"></a>
</se-badge>
<style>
  .se-example {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #999;
  }
</style>

Props