Badge 徽标数

概述

1 .用于通知未读数的角标，提醒用户点击
2 .他的使用是把需要展示的东西作为slot传进去，但是这个使用起来感觉有点不合适，感觉大小关系错位了
3 .

props

1 .count 当前显示的数字
2 .overflow-count 展示封顶的数字值，如果超过这个值会显示xx+ 一般是99+，999+
3 .dot 此时只显示小红点，不显示数字
4 .text 设置text属性之后，可以自定义显示内容
5 .type 设置不同的状态的小圆点
6 .offset 设置状态点的位置偏移，格式为【x,y】

问题

1 .最小的字体好像是12px
2 .使用transform：scale可以缩小，但是只能缩到0.8.在小会看不清楚
3 .汉字或者英文字符，现在只让他输出前5个值，不然太长了不好看
4 .好简单0

css比较关键，所以把这个也加上吧
@name:.badge;
@{name}{
    .r;
    display: inline-block;


    &_dot{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: red;
    }

    &_text{
        padding: 3px;
        background: red;
        font-size: 10px;
        color:#fff;
        transform: scale(0.8,0.8);
        border-radius:5px;
    }

    &_count{
        padding: 3px;
        background: red;
        font-size: 10px;
        color:#fff;
        transform: scale(0.8,0.8);
        border-radius:5px;
    }
}