2020-08-13 11:47:56 +08:00
|
|
|
# Badge <small>徽标</small>
|
|
|
|
|
|
|
|
|
|
## 示例
|
|
|
|
|
|
|
|
|
|
### 文字徽标
|
|
|
|
|
|
|
|
|
|
徽标内容可以是纯文本。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/badge/text.vue" ]]
|
|
|
|
|
|
|
|
|
|
### 数字徽标
|
|
|
|
|
|
|
|
|
|
徽标内容也可以是数字，超过最大值时可以显示为*最大值+*。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/badge/number.vue" ]]
|
|
|
|
|
|
2022-01-24 18:53:52 +08:00
|
|
|
### 飘角徽标
|
2021-09-16 19:23:58 +08:00
|
|
|
|
|
|
|
|
不提供徽标内容时，徽标将以圆点样式显示在右上角。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/badge/corner-dot.vue" ]]
|
|
|
|
|
|
2020-08-13 11:47:56 +08:00
|
|
|
### 圆点徽标
|
|
|
|
|
|
|
|
|
|
不提供插槽内容时，徽标将以圆点样式显示。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/badge/dot.vue" ]]
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### 属性
|
|
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
| -- | -- | -- | -- |
|
2021-10-20 01:11:27 +08:00
|
|
|
| ``type`` | `string=` | `'error'` | [^type] |
|
|
|
|
|
| ``value`` | `string | number` | - | 徽标内容值。为 `number` 类型值时，会受 [`max`](#props-max) 属性限制。为 `string` 类型时，`max` 会被忽略。 |
|
|
|
|
|
| ``max`` | `number=` | `badge.max` | 徽标数值的最大值，当 `value` 超过此值时，徽标内容会显示为 `{max}+`。当 `value` 为 `string` 时会被忽略。 |
|
|
|
|
|
| ``hidden`` | `boolean=` | `false` | 是否处于隐藏状态。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
^^^type
|
|
|
|
|
徽标状态类型。自带样式的可选值如下。使用其它值时需要自行定义 `.veui-badge-{type}` 的样式。
|
|
|
|
|
|
|
|
|
|
+++枚举值
|
|
|
|
|
| 值 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `info` | 信息提示样式。 |
|
|
|
|
|
| `success` | 成功样式。 |
|
|
|
|
|
| `warning` | 警告样式。 |
|
|
|
|
|
| `error` | 错误样式。 |
|
|
|
|
|
| `aux` | 辅助样式。 |
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
2021-10-20 01:11:27 +08:00
|
|
|
| ``default`` | 需要显示徽标的目标内容。 |
|
