标记 Badge

空显示状态，用于给内部无数据情况的展示。十分简单

基础用法

基础的徽标用法

¹²

^ok

⁹⁹⁺

<template>
  <b-space :size="24">
    <b-badge :value="12">
      <b-button>普通按钮</b-button>
    </b-badge>
    <b-badge :value="3">
      <b-button>回复</b-button>
    </b-badge>
    <b-badge :value="1" type="primary">
      <b-button>primary徽标</b-button>
    </b-badge>
    <b-badge :value="2" type="warning">
      <b-button>warning徽标</b-button>
    </b-badge>
    <b-badge value="ok" type="success">
      <b-button>success徽标</b-button>
    </b-badge>
    <b-badge :value="200" :max="99">
      <b-button>最大数值</b-button>
    </b-badge>
  </b-space>
</template>

<template>
  <b-space :size="24">
    <b-badge :value="12">
      <b-button>普通按钮</b-button>
    </b-badge>
    <b-badge :value="3">
      <b-button>回复</b-button>
    </b-badge>
    <b-badge :value="1" type="primary">
      <b-button>primary徽标</b-button>
    </b-badge>
    <b-badge :value="2" type="warning">
      <b-button>warning徽标</b-button>
    </b-badge>
    <b-badge value="ok" type="success">
      <b-button>success徽标</b-button>
    </b-badge>
    <b-badge :value="200" :max="99">
      <b-button>最大数值</b-button>
    </b-badge>
  </b-space>
</template>

自定义提示内容

可以提示非数字的徽标

^hot

^new

红点模式

<template>
  <b-space :size="24">
    <b-badge value="hot">
      <b-button>热点</b-button>
    </b-badge>
    <b-badge value="new">
      <b-button>回复</b-button>
    </b-badge>
    <b-badge is-dot>红点模式</b-badge>
  </b-space>
</template>

<template>
  <b-space :size="24">
    <b-badge value="hot">
      <b-button>热点</b-button>
    </b-badge>
    <b-badge value="new">
      <b-button>回复</b-button>
    </b-badge>
    <b-badge is-dot>红点模式</b-badge>
  </b-space>
</template>

Props

参数	说明	类型	可选值	默认值
value	显示值	string, number	—	—
max	最大值，超过最大值会显示 '{max}+'	number	—	—
is-dot	小圆点	boolean	—	false
hidden	隐藏 badge	boolean	—	false
type	类型	string	primary / success / warning / danger / info	—

标记 Badge ​

基础用法 ​

自定义提示内容 ​

Props ​

标记 Badge

基础用法

自定义提示内容

Props