5.3-badge组件
badge组件
用途：应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。
简单说就是消息提醒
支持设备
|
手机 |
平板 |
智慧屏 |
智能穿戴 |
|---|---|---|---|
|
支持 |
支持 |
不支持 |
不支持 |
子组件
支持单个子组件。
说明
仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。
属性
除支持通用属性外，还支持如下属性：
|
名称 |
类型 |
默认值 |
必填 |
描述 |
|---|---|---|---|---|
|
placement |
string |
rightTop |
否 |
事件提醒的数字标记或者圆点标记的位置，可选值为：
|
|
count |
number |
0 |
否 |
设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。
|
|
visible |
boolean |
false |
否 |
是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。 |
|
maxcount |
number |
99 |
否 |
最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。
|
|
config |
BadgeConfig |
- |
否 |
设置新事件标记相关配置属性。 |
|
label6+ |
string |
- |
否 |
设置新事件提醒的文本值。
|
|
名称 |
类型 |
默认值 |
必填 |
描述 |
|---|---|---|---|---|
|
badgeColor |
|
#fa2a2d |
否 |
新事件标记背景色。 |
|
textColor |
|
#ffffff |
否 |
数字标记的数字文本颜色。 |
|
textSize |
|
10px |
否 |
数字标记的数字文本大小。 |
|
badgeSize |
|
6px |
否 |
圆点标记的默认大小 |
样式
支持通用样式。
说明
badge组件的子组件大小不能超过badge组件本身的大小，否则子组件不会绘制。
代码样例
HTML
css
.badge { width: 41px;//宽高要大于子组件 height: 41px; placement:rightTop}js
export default { data: { title: "Hello World", "badgeconfig":{ "badgeColor":"#0a59f7", "textColor":"#ffffff" } },}效果图
、