Badge 徽章表，红点提醒

基础

1 .用于通知未读数的角标，提醒用户点击
2 .自己有实现基础版本
3 .使用,其实可以看到是直接跟在想要加红点的后面，然后位置是靠传入一个数组来确定的。看了View的这个组件，他其实是用的是传入一个slot。那么整个组件其实有点类似于tooltips，文字提醒那种写法

            花花

4 .之前的源码

//想的太简单了

5 .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;
    }
}

源码发现

1 .sub ^{标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注，比如 WWW[1]
2 .offset 设置位置用的方法是margin-top,margin-right，并不是实际调整的位置。
3 .这个组件的写法明显和之前的组件不一样。可能换人了，还是他们内部风格没有统一
4 .加入自定义class样式
[${this.className}]:!!this.className,
5 .样式上下竟然还有重复的地方
6 .状态点那个有点没搞明白存在的意义，所以这里先不研究这个
7 .源码}

9 .less部分

// @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;
//     }
// }


@name:.li-badge;

@{name}{
    position: relative;
    display: inline-block;

    &-dot{
      position: absolute;
      border-radius: 100%;
      background: @error-color;
      z-index:10;
      top:-4px;
      right:-8px;
      height: 8px;
      width: 8px;
      transform: translateX(-50%);
      transform-origin:0 center;
      box-shadow: 0 0 0 1px #fff;  
    }

    &-count{
        font-family: "Monsopaced Number";
        vertical-align: middle;
        position: absolute;
        transform: translateX(50%);
        top:-10px;
        right: 0;
        height: 16px;
        border-radius: 10px;
        // min-width: 20px;
        background: @error-color;
        border:1px solid transparent;
        color:#fff;
        line-height: 16px;
        text-align: center;
        padding: 0 6px;
        font-size: 12px;
        white-space: nowrap;
        transform-origin: -10% center;
        z-index: 10;
        box-shadow: 0 0 0 1px #fff;

        &-custom{
            background: transparent;
            color:inherit;
            border-color:transparent;
            box-shadow: none;
        }

        &-primary{
            background: @primary-color;
        }
        &-success{
            background: @success-color;
        }
        &-error{
            background: @error-color;
        }
        &-warning{
            background: @warning-color;
        }
        &-info{
            background: @info-color;
        }
        &-normal{
            background:@normal-color;
            color:@subsidiary-color;
        }
    }
}