Chi-UI

Appearance

Badge 徽标 ​

代码示例 ​

基础用法 ​

最简单的用法，为一个元素添加一个徽标。

11


12
12
12
12
12
<template>
  <chi-badge is-dot>
    <chi-button>消息</chi-button>
  </chi-badge>
  <chi-badge :content="11" style="margin-inline-start: 8px">
    <chi-button>消息</chi-button>
  </chi-badge>
  <br />
  <br />
  <chi-space>
    <chi-badge :content="12" type="primary"></chi-badge>
    <chi-badge :content="12" type="success"></chi-badge>
    <chi-badge :content="12" type="warning"></chi-badge>
    <chi-badge :content="12" type="info"></chi-badge>
    <chi-badge :content="12" type="disabled"></chi-badge>
  </chi-space>
</template>

最大值 ​

通过 max 属性可以设置一个最大值，当徽标的值超过该值后会显示为加号状态。

99+
<template>
  <chi-badge :content="120" :max="99">
    <chi-button>消息</chi-button>
  </chi-badge>
</template>

状态点 ​

添加 is-dot 属性并且不使用插槽，可以将徽标设置为状态点。

Error
Primary
Success
Warning
Info
Disabled 
<template>
  <div style="margin-bottom: 8px">
    <chi-badge is-dot :content="4"></chi-badge>
    Error
  </div>
  <div style="margin-bottom: 8px">
    <chi-badge is-dot type="primary"></chi-badge>
    Primary
  </div>
  <div style="margin-bottom: 8px">
    <chi-badge is-dot type="success"></chi-badge>
    Success
  </div>
  <div style="margin-bottom: 8px">
    <chi-badge is-dot type="warning"></chi-badge>
    Warning
  </div>
  <div style="margin-bottom: 8px">
    <chi-badge is-dot type="info"></chi-badge>
    Info
  </div>
  <div style="margin-bottom: 8px">
    <chi-badge is-dot type="disabled"></chi-badge>
    Disabled
  </div>
</template>

API ​

Badge 属性 ​

名称类型说明默认值
colorstring设置徽标的颜色，可以在内置类型无法满足需求时使用null
contentnumber | string徽标的内容null
is-dotboolean设置徽标是否为状态点false
maxnumber当徽标为数字时，可以设置最大值，超过最大值后会显示为 ${max}+
type'error' | 'primary' | 'success' | 'warning' | 'info' | 'disabled'设置徽标的颜色'error'

Badge 事件 ​

名称说明参数
badge-click当点击时触发