1# badge<a name="ZH-CN_TOPIC_0000001164290706"></a> 2 3应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。 4 5> **说明：** 6>从API Version 5 开始支持。 7 8## 权限列表<a name="zh-cn_topic_0000001173324629_section11257113618419"></a> 9 10无 11 12## 子组件<a name="zh-cn_topic_0000001173324629_section9288143101012"></a> 13 14支持单个子组件。 15 16> **说明：** 17>仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。 18 19## 属性<a name="zh-cn_topic_0000001173324629_section1355418214459"></a> 20 21除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 22 23<a name="zh-cn_topic_0000001173324629_table3871294431"></a> 24<table><thead align="left"><tr id="zh-cn_topic_0000001173324629_row12871029184318"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173324629_p087529184319"><a name="zh-cn_topic_0000001173324629_p087529184319"></a><a name="zh-cn_topic_0000001173324629_p087529184319"></a>名称</p> 25</th> 26<th class="cellrowborder" valign="top" width="12.61%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173324629_p2087629204319"><a name="zh-cn_topic_0000001173324629_p2087629204319"></a><a name="zh-cn_topic_0000001173324629_p2087629204319"></a>类型</p> 27</th> 28<th class="cellrowborder" valign="top" width="14.21%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173324629_p1287112911432"><a name="zh-cn_topic_0000001173324629_p1287112911432"></a><a name="zh-cn_topic_0000001173324629_p1287112911432"></a>默认值</p> 29</th> 30<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173324629_p1687929124312"><a name="zh-cn_topic_0000001173324629_p1687929124312"></a><a name="zh-cn_topic_0000001173324629_p1687929124312"></a>必填</p> 31</th> 32<th class="cellrowborder" valign="top" width="42.54%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173324629_p138732916431"><a name="zh-cn_topic_0000001173324629_p138732916431"></a><a name="zh-cn_topic_0000001173324629_p138732916431"></a>描述</p> 33</th> 34</tr> 35</thead> 36<tbody><tr id="zh-cn_topic_0000001173324629_row887192994311"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324629_p2087102919434"><a name="zh-cn_topic_0000001173324629_p2087102919434"></a><a name="zh-cn_topic_0000001173324629_p2087102919434"></a>placement</p> 37</td> 38<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324629_p188822916435"><a name="zh-cn_topic_0000001173324629_p188822916435"></a><a name="zh-cn_topic_0000001173324629_p188822916435"></a>string</p> 39</td> 40<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324629_p10889298434"><a name="zh-cn_topic_0000001173324629_p10889298434"></a><a name="zh-cn_topic_0000001173324629_p10889298434"></a>rightTop</p> 41</td> 42<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324629_p1881929194314"><a name="zh-cn_topic_0000001173324629_p1881929194314"></a><a name="zh-cn_topic_0000001173324629_p1881929194314"></a>否</p> 43</td> 44<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324629_p1788142954315"><a name="zh-cn_topic_0000001173324629_p1788142954315"></a><a name="zh-cn_topic_0000001173324629_p1788142954315"></a>事件提醒的数字标记或者圆点标记的位置，可选值为：</p> 45<a name="zh-cn_topic_0000001173324629_ul1388112944320"></a><a name="zh-cn_topic_0000001173324629_ul1388112944320"></a><ul id="zh-cn_topic_0000001173324629_ul1388112944320"><li>right：位于组件右边框。</li><li>rightTop：位于组件边框右上角。</li><li>left：位于组件左边框。</li></ul> 46</td> 47</tr> 48<tr id="zh-cn_topic_0000001173324629_row6887294431"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324629_p28822974315"><a name="zh-cn_topic_0000001173324629_p28822974315"></a><a name="zh-cn_topic_0000001173324629_p28822974315"></a>count</p> 49</td> 50<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324629_p188129194313"><a name="zh-cn_topic_0000001173324629_p188129194313"></a><a name="zh-cn_topic_0000001173324629_p188129194313"></a>number</p> 51</td> 52<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324629_p288102954310"><a name="zh-cn_topic_0000001173324629_p288102954310"></a><a name="zh-cn_topic_0000001173324629_p288102954310"></a>0</p> 53</td> 54<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324629_p158852915433"><a name="zh-cn_topic_0000001173324629_p158852915433"></a><a name="zh-cn_topic_0000001173324629_p158852915433"></a>否</p> 55</td> 56<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324629_p19881229144313"><a name="zh-cn_topic_0000001173324629_p19881229144313"></a><a name="zh-cn_topic_0000001173324629_p19881229144313"></a>设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。</p> 57<div class="note" id="zh-cn_topic_0000001173324629_note388629144318"><a name="zh-cn_topic_0000001173324629_note388629144318"></a><a name="zh-cn_topic_0000001173324629_note388629144318"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324629_p488929174319"><a name="zh-cn_topic_0000001173324629_p488929174319"></a><a name="zh-cn_topic_0000001173324629_p488929174319"></a>当数字设置为大于maxcount时，将使用maxcount显示。</p> 58<p id="zh-cn_topic_0000001173324629_p16106238105113"><a name="zh-cn_topic_0000001173324629_p16106238105113"></a><a name="zh-cn_topic_0000001173324629_p16106238105113"></a>count属性最大支持整数值为2147483647。</p> 59</div></div> 60</td> 61</tr> 62<tr id="zh-cn_topic_0000001173324629_row1088152994313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324629_p1488329174315"><a name="zh-cn_topic_0000001173324629_p1488329174315"></a><a name="zh-cn_topic_0000001173324629_p1488329174315"></a>visible</p> 63</td> 64<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324629_p1888102934319"><a name="zh-cn_topic_0000001173324629_p1888102934319"></a><a name="zh-cn_topic_0000001173324629_p1888102934319"></a>boolean</p> 65</td> 66<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324629_p88820291436"><a name="zh-cn_topic_0000001173324629_p88820291436"></a><a name="zh-cn_topic_0000001173324629_p88820291436"></a>false</p> 67</td> 68<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324629_p10881329184320"><a name="zh-cn_topic_0000001173324629_p10881329184320"></a><a name="zh-cn_topic_0000001173324629_p10881329184320"></a>否</p> 69</td> 70<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324629_p988112917435"><a name="zh-cn_topic_0000001173324629_p988112917435"></a><a name="zh-cn_topic_0000001173324629_p988112917435"></a>是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。</p> 71</td> 72</tr> 73<tr id="zh-cn_topic_0000001173324629_row138862934313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324629_p98872919436"><a name="zh-cn_topic_0000001173324629_p98872919436"></a><a name="zh-cn_topic_0000001173324629_p98872919436"></a>maxcount</p> 74</td> 75<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324629_p28822920432"><a name="zh-cn_topic_0000001173324629_p28822920432"></a><a name="zh-cn_topic_0000001173324629_p28822920432"></a>number</p> 76</td> 77<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324629_p28842944318"><a name="zh-cn_topic_0000001173324629_p28842944318"></a><a name="zh-cn_topic_0000001173324629_p28842944318"></a>99</p> 78</td> 79<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324629_p158810298438"><a name="zh-cn_topic_0000001173324629_p158810298438"></a><a name="zh-cn_topic_0000001173324629_p158810298438"></a>否</p> 80</td> 81<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324629_p3881229164317"><a name="zh-cn_topic_0000001173324629_p3881229164317"></a><a name="zh-cn_topic_0000001173324629_p3881229164317"></a>最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。</p> 82<div class="note" id="zh-cn_topic_0000001173324629_note046285914515"><a name="zh-cn_topic_0000001173324629_note046285914515"></a><a name="zh-cn_topic_0000001173324629_note046285914515"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324629_p114631559205118"><a name="zh-cn_topic_0000001173324629_p114631559205118"></a><a name="zh-cn_topic_0000001173324629_p114631559205118"></a>maxcount属性最大支持整数值为2147483647。</p> 83</div></div> 84</td> 85</tr> 86<tr id="zh-cn_topic_0000001173324629_row18881929154314"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324629_p188122934312"><a name="zh-cn_topic_0000001173324629_p188122934312"></a><a name="zh-cn_topic_0000001173324629_p188122934312"></a>config</p> 87</td> 88<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324629_p128910296432"><a name="zh-cn_topic_0000001173324629_p128910296432"></a><a name="zh-cn_topic_0000001173324629_p128910296432"></a><a href="#zh-cn_topic_0000001173324629_table525042221515">BadgeConfig</a></p> 89</td> 90<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324629_p389529124317"><a name="zh-cn_topic_0000001173324629_p389529124317"></a><a name="zh-cn_topic_0000001173324629_p389529124317"></a>-</p> 91</td> 92<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324629_p589142984319"><a name="zh-cn_topic_0000001173324629_p589142984319"></a><a name="zh-cn_topic_0000001173324629_p589142984319"></a>否</p> 93</td> 94<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324629_p4890291437"><a name="zh-cn_topic_0000001173324629_p4890291437"></a><a name="zh-cn_topic_0000001173324629_p4890291437"></a>设置新事件标记相关配置属性。</p> 95</td> 96</tr> 97<tr id="zh-cn_topic_0000001173324629_row08922919437"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324629_p12894299435"><a name="zh-cn_topic_0000001173324629_p12894299435"></a><a name="zh-cn_topic_0000001173324629_p12894299435"></a>label<sup id="zh-cn_topic_0000001173324629_sup14890292436"><a name="zh-cn_topic_0000001173324629_sup14890292436"></a><a name="zh-cn_topic_0000001173324629_sup14890292436"></a><span>6+</span></sup></p> 98</td> 99<td class="cellrowborder" valign="top" width="12.61%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324629_p18896292438"><a name="zh-cn_topic_0000001173324629_p18896292438"></a><a name="zh-cn_topic_0000001173324629_p18896292438"></a>string</p> 100</td> 101<td class="cellrowborder" valign="top" width="14.21%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324629_p1889429194315"><a name="zh-cn_topic_0000001173324629_p1889429194315"></a><a name="zh-cn_topic_0000001173324629_p1889429194315"></a>-</p> 102</td> 103<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324629_p6891729124318"><a name="zh-cn_topic_0000001173324629_p6891729124318"></a><a name="zh-cn_topic_0000001173324629_p6891729124318"></a>否</p> 104</td> 105<td class="cellrowborder" valign="top" width="42.54%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324629_p15894294432"><a name="zh-cn_topic_0000001173324629_p15894294432"></a><a name="zh-cn_topic_0000001173324629_p15894294432"></a>设置新事件提醒的文本值。</p> 106<div class="note" id="zh-cn_topic_0000001173324629_note168915299438"><a name="zh-cn_topic_0000001173324629_note168915299438"></a><a name="zh-cn_topic_0000001173324629_note168915299438"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324629_p118982994316"><a name="zh-cn_topic_0000001173324629_p118982994316"></a><a name="zh-cn_topic_0000001173324629_p118982994316"></a>使用该属性时，count和maxcount属性不生效。</p> 107</div></div> 108</td> 109</tr> 110</tbody> 111</table> 112 113**表 1** BadgeConfig 114 115<a name="zh-cn_topic_0000001173324629_table525042221515"></a> 116<table><thead align="left"><tr id="zh-cn_topic_0000001173324629_row10250162216151"><th class="cellrowborder" valign="top" width="15.370000000000001%" id="mcps1.2.6.1.1"><p id="zh-cn_topic_0000001173324629_p256733317156"><a name="zh-cn_topic_0000001173324629_p256733317156"></a><a name="zh-cn_topic_0000001173324629_p256733317156"></a>名称</p> 117</th> 118<th class="cellrowborder" valign="top" width="13.62%" id="mcps1.2.6.1.2"><p id="zh-cn_topic_0000001173324629_p13567143391514"><a name="zh-cn_topic_0000001173324629_p13567143391514"></a><a name="zh-cn_topic_0000001173324629_p13567143391514"></a>类型</p> 119</th> 120<th class="cellrowborder" valign="top" width="12.46%" id="mcps1.2.6.1.3"><p id="zh-cn_topic_0000001173324629_p165679339152"><a name="zh-cn_topic_0000001173324629_p165679339152"></a><a name="zh-cn_topic_0000001173324629_p165679339152"></a>默认值</p> 121</th> 122<th class="cellrowborder" valign="top" width="7.22%" id="mcps1.2.6.1.4"><p id="zh-cn_topic_0000001173324629_p1018465012153"><a name="zh-cn_topic_0000001173324629_p1018465012153"></a><a name="zh-cn_topic_0000001173324629_p1018465012153"></a>必填</p> 123</th> 124<th class="cellrowborder" valign="top" width="51.33%" id="mcps1.2.6.1.5"><p id="zh-cn_topic_0000001173324629_p1250142241516"><a name="zh-cn_topic_0000001173324629_p1250142241516"></a><a name="zh-cn_topic_0000001173324629_p1250142241516"></a>描述</p> 125</th> 126</tr> 127</thead> 128<tbody><tr id="zh-cn_topic_0000001173324629_row1425022251510"><td class="cellrowborder" valign="top" width="15.370000000000001%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324629_p6944185918156"><a name="zh-cn_topic_0000001173324629_p6944185918156"></a><a name="zh-cn_topic_0000001173324629_p6944185918156"></a>badgeColor</p> 129</td> 130<td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324629_p3944185918156"><a name="zh-cn_topic_0000001173324629_p3944185918156"></a><a name="zh-cn_topic_0000001173324629_p3944185918156"></a><color></p> 131</td> 132<td class="cellrowborder" valign="top" width="12.46%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324629_p494412594152"><a name="zh-cn_topic_0000001173324629_p494412594152"></a><a name="zh-cn_topic_0000001173324629_p494412594152"></a>#fa2a2d</p> 133</td> 134<td class="cellrowborder" valign="top" width="7.22%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324629_p2018411507152"><a name="zh-cn_topic_0000001173324629_p2018411507152"></a><a name="zh-cn_topic_0000001173324629_p2018411507152"></a>否</p> 135</td> 136<td class="cellrowborder" valign="top" width="51.33%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324629_p12623249168"><a name="zh-cn_topic_0000001173324629_p12623249168"></a><a name="zh-cn_topic_0000001173324629_p12623249168"></a>新事件标记背景色。</p> 137</td> 138</tr> 139<tr id="zh-cn_topic_0000001173324629_row1325114221159"><td class="cellrowborder" valign="top" width="15.370000000000001%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324629_p189441459101515"><a name="zh-cn_topic_0000001173324629_p189441459101515"></a><a name="zh-cn_topic_0000001173324629_p189441459101515"></a>textColor</p> 140</td> 141<td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324629_p18944175915154"><a name="zh-cn_topic_0000001173324629_p18944175915154"></a><a name="zh-cn_topic_0000001173324629_p18944175915154"></a><color></p> 142</td> 143<td class="cellrowborder" valign="top" width="12.46%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324629_p29441859141514"><a name="zh-cn_topic_0000001173324629_p29441859141514"></a><a name="zh-cn_topic_0000001173324629_p29441859141514"></a>#ffffff</p> 144</td> 145<td class="cellrowborder" valign="top" width="7.22%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324629_p31843506151"><a name="zh-cn_topic_0000001173324629_p31843506151"></a><a name="zh-cn_topic_0000001173324629_p31843506151"></a>否</p> 146</td> 147<td class="cellrowborder" valign="top" width="51.33%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324629_p196231461610"><a name="zh-cn_topic_0000001173324629_p196231461610"></a><a name="zh-cn_topic_0000001173324629_p196231461610"></a>数字标记的数字文本颜色。</p> 148</td> 149</tr> 150<tr id="zh-cn_topic_0000001173324629_row132511522131513"><td class="cellrowborder" valign="top" width="15.370000000000001%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324629_p7945175918154"><a name="zh-cn_topic_0000001173324629_p7945175918154"></a><a name="zh-cn_topic_0000001173324629_p7945175918154"></a>textSize</p> 151</td> 152<td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324629_p1594515919158"><a name="zh-cn_topic_0000001173324629_p1594515919158"></a><a name="zh-cn_topic_0000001173324629_p1594515919158"></a><length></p> 153</td> 154<td class="cellrowborder" valign="top" width="12.46%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324629_p189451259121511"><a name="zh-cn_topic_0000001173324629_p189451259121511"></a><a name="zh-cn_topic_0000001173324629_p189451259121511"></a>10px</p> 155</td> 156<td class="cellrowborder" valign="top" width="7.22%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324629_p14184125016151"><a name="zh-cn_topic_0000001173324629_p14184125016151"></a><a name="zh-cn_topic_0000001173324629_p14184125016151"></a>否</p> 157</td> 158<td class="cellrowborder" valign="top" width="51.33%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324629_p1962474101618"><a name="zh-cn_topic_0000001173324629_p1962474101618"></a><a name="zh-cn_topic_0000001173324629_p1962474101618"></a>数字标记的数字文本大小。</p> 159</td> 160</tr> 161<tr id="zh-cn_topic_0000001173324629_row225122212159"><td class="cellrowborder" valign="top" width="15.370000000000001%" headers="mcps1.2.6.1.1 "><p id="zh-cn_topic_0000001173324629_p1394585918156"><a name="zh-cn_topic_0000001173324629_p1394585918156"></a><a name="zh-cn_topic_0000001173324629_p1394585918156"></a>badgeSize</p> 162</td> 163<td class="cellrowborder" valign="top" width="13.62%" headers="mcps1.2.6.1.2 "><p id="zh-cn_topic_0000001173324629_p159451459111519"><a name="zh-cn_topic_0000001173324629_p159451459111519"></a><a name="zh-cn_topic_0000001173324629_p159451459111519"></a><length></p> 164</td> 165<td class="cellrowborder" valign="top" width="12.46%" headers="mcps1.2.6.1.3 "><p id="zh-cn_topic_0000001173324629_p694545961517"><a name="zh-cn_topic_0000001173324629_p694545961517"></a><a name="zh-cn_topic_0000001173324629_p694545961517"></a>6px</p> 166</td> 167<td class="cellrowborder" valign="top" width="7.22%" headers="mcps1.2.6.1.4 "><p id="zh-cn_topic_0000001173324629_p10184135015153"><a name="zh-cn_topic_0000001173324629_p10184135015153"></a><a name="zh-cn_topic_0000001173324629_p10184135015153"></a>否</p> 168</td> 169<td class="cellrowborder" valign="top" width="51.33%" headers="mcps1.2.6.1.5 "><p id="zh-cn_topic_0000001173324629_p1962410411162"><a name="zh-cn_topic_0000001173324629_p1962410411162"></a><a name="zh-cn_topic_0000001173324629_p1962410411162"></a>圆点标记的默认大小</p> 170</td> 171</tr> 172</tbody> 173</table> 174 175## 样式<a name="zh-cn_topic_0000001173324629_section5775351116"></a> 176 177支持[通用样式](js-components-common-styles.md)。 178 179> **说明：** 180>badge组件的子组件大小不能超过badge组件本身的大小，否则子组件不会绘制。 181 182## 事件<a name="zh-cn_topic_0000001173324629_section43461940193518"></a> 183 184支持[通用事件](js-components-common-events.md)。 185 186## 方法<a name="zh-cn_topic_0000001173324629_section2279124532420"></a> 187 188支持[通用方法](js-components-common-methods.md)。 189 190## 示例<a name="zh-cn_topic_0000001173324629_section3510104413431"></a> 191 192``` 193<!-- xxx.hml --> 194<div class="container"> 195 <badge class="badge" config="{{badgeconfig}}" visible="true" count="100" maxcount="99"> 196 <text class="text1">example</text> 197 </badge> 198 <badge class="badge" visible="true" count="0"> 199 <text class="text2">example</text> 200 </badge> 201</div> 202``` 203 204``` 205/* xxx.css */ 206.container { 207 flex-direction: column; 208 width: 100%; 209 align-items: center; 210} 211.badge { 212 width: 50%; 213 margin-top: 100px; 214} 215.text1 { 216 background-color: #f9a01e; 217 font-size: 50px; 218} 219.text2 { 220 background-color: #46b1e3; 221 font-size: 50px; 222} 223``` 224 225``` 226// xxx.js 227export default { 228 data:{ 229 badgeconfig:{ 230 badgeColor:"#0a59f7", 231 textColor:"#ffffff", 232 } 233 } 234} 235``` 236 237 238 239
