mui 之 数字角标

说明

• 数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。
• 角标的核心类是.mui-badge，默认为实心灰色背景；
• 同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标

官方说明：https://dev.dcloud.net.cn/mui/ui/#badges

有底色

<span class="mui-badge">12</span>
<span class="mui-badge mui-badge-purple">12</span>

<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-blue">12</span>

<span class="mui-badge mui-badge-success">12</span>
<span class="mui-badge mui-badge-green">12</span>

<span class="mui-badge mui-badge-warning">12</span>
<span class="mui-badge mui-badge-yellow">12</span>

<span class="mui-badge mui-badge-danger">12</span>
<span class="mui-badge mui-badge-red">12</span>

无底色

无底色只需要加上 mui-badge-inverted 类

<span class="mui-badge mui-badge-inverted">12</span>
<span class="mui-badge mui-badge-purple mui-badge-inverted">12</span>

<span class="mui-badge mui-badge-primary mui-badge-inverted">12</span>
<span class="mui-badge mui-badge-blue mui-badge-inverted">12</span>

<span class="mui-badge mui-badge-success mui-badge-inverted">12</span>
<span class="mui-badge mui-badge-green mui-badge-inverted">12</span>

<span class="mui-badge mui-badge-warning mui-badge-inverted">12</span>
<span class="mui-badge mui-badge-yellow mui-badge-inverted">12</span>

<span class="mui-badge mui-badge-danger mui-badge-inverted">12</span>
<span class="mui-badge mui-badge-red mui-badge-inverted">12</span>