5.3-badge组件

badge组件

用途：应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。

简单说就是消息提醒

支持设备

手机	平板	智慧屏	智能穿戴
支持	支持	不支持	不支持

子组件

支持单个子组件。

说明

仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
placement	string	rightTop	否	事件提醒的数字标记或者圆点标记的位置，可选值为： right：位于组件右边框。 rightTop：位于组件边框右上角。 left：位于组件左边框。
count	number	0	否	设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。 说明 当数字设置为大于maxcount时，将使用maxcount显示。 count属性最大支持整数值为2147483647。
visible	boolean	false	否	是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。
maxcount	number	99	否	最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。 说明 maxcount属性最大支持整数值为2147483647。
config	BadgeConfig	-	否	设置新事件标记相关配置属性。
label6+	string	-	否	设置新事件提醒的文本值。 说明 使用该属性时，count和maxcount属性不生效。

表1 BadgeConfig

名称	类型	默认值	必填	描述
badgeColor	<color>	#fa2a2d	否	新事件标记背景色。
textColor	<color>	#ffffff	否	数字标记的数字文本颜色。
textSize	<length>	10px	否	数字标记的数字文本大小。
badgeSize	<length>	6px	否	圆点标记的默认大小

样式

支持通用样式。

说明

badge组件的子组件大小不能超过badge组件本身的大小，否则子组件不会绘制。

 代码样例

HTML

<div id="div9">
                <image id="image8" src="common/images/fk.png"></image>
                <image id="image9" src="common/images/fh.png"></image>
                 <badge class="badge" config="{{badgeconfig}}" visible="true" count="45" maxcount="99">
                <image id="image10" src="common/images/sh.png"></image>
                </badge>
                <image id="image11" src="common/images/pj.png"></image>
            </div>

css

.badge {
    width: 41px;//宽高要大于子组件
    height: 41px;
    placement:rightTop
}

js

export default {
    data: {
        title: "Hello World",
        "badgeconfig":{
            "badgeColor":"#0a59f7",
            "textColor":"#ffffff"
        }
    },
}

效果图

、