概述

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

<template>
    <div class="badge" 
    :style="computedStyleBadge"
    :class="computedBadge">
    {{computedValue}}
    </div>
</template>
<script>
export default {
    props:{
        dot:{
            type:Boolean,
            default:false,
        },
        // 简单红点
        offset:{
            type:Array,
            default:function(){
                return [0,0]
            }
        },
        text:{
            type:String,
            default:''
        },
        count:{
            type:Number,
            default:0
        },
        overflowCount:{
            type:Number,
            default:99,
        }
    },
    computed:{
        computedBadge(){
            if(this.dot){
                // 红点的话直接返回这个样式
                return 'badge_dot'
            }else if(this.text.length>0){
                // 汉字的话
                return 'badge_text'

            }else if(this.count!=0){
                // 数字的情况
                return 'badge_count'
            }
        },
        computedStyleBadge(){
            return {
                left:`${this.offset[0]}px`,
                top:`${this.offset[1]}px`
            }
        },
        computedValue(){
            if(this.text.length>0){
                return this.text.slice(0,5)
            }else if(this.count!=0){
                if(this.overflowCount&&this.count>this.overflowCount){
                    return this.overflowCount+'+'
                }else{
                    return this.count
                }
            }
        }
    }
}
</script>
<style lang="less" src="./index.less"></style>


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