Badge 徽标数

概述

主要用于通知未读数的角标，提醒用户点击。

代码示例

基础用法

最简单的使用方法。

<style scoped>
    .demo-badge{
        width: 42px;
        height: 42px;
        background: #eee;
        border-radius: 6px;
        display: inline-block;
    }
</style>
<template>
    <Badge :count="3">
        <a href="#" class="demo-badge"></a>
    </Badge>
</template>
<script>
    export default {
    }
</script>

小红点

强迫症患者慎用！

<template>
    <Badge dot>
        <a href="#" class="demo-badge"></a>
    </Badge>
    <Badge dot>
        <Icon type="ios-notifications-outline" size="26"></Icon>
    </Badge>
    <Badge dot>
        <a href="#">可以是一个链接</a>
    </Badge>
</template>
<script>
    export default {
    }
</script>

封顶数字

通过设置overflow-count属性设置一个封顶值，当超过时，会显示${overflowCount}+

<template>
    <Badge :count="100">
        <a href="#" class="demo-badge"></a>
    </Badge>
    <Badge :count="1000" overflow-count="999">
        <a href="#" class="demo-badge"></a>
    </Badge>
</template>
<script>
    export default {
    }
</script>

独立使用及自定义样式

可以没有 slot 独立展示。

<style>
    .demo-badge-alone{
        background: #5cb85c !important;
    }
</style>
<template>
    <Badge :count="10"></Badge>
    <Badge :count="20" class-name="demo-badge-alone"></Badge>
</template>
<script>
    export default {
    }
</script>

自定义内容

设置 text 属性，可以自定义显示内容。

<template>
    <Row>
        <Col span="6">
            <Badge text="new">
                <a href="#" class="demo-badge"></a>
            </Badge>
        </Col>
        <Col span="6">
            <Badge text="hot">
                <a href="#" class="demo-badge"></a>
            </Badge>
        </Col>
    </Row>
</template>
<script>
    export default {
    }
</script>

状态点

用于表示状态的小圆点。

<template>
    <Badge status="success" />
    <Badge status="error" />
    <Badge status="default" />
    <Badge status="processing" />
    <Badge status="warning" />
    <br />
    <Badge status="success" text="Success" />
    <br />
    <Badge status="error" text="Error" />
    <br />
    <Badge status="default" text="Default" />
    <br />
    <Badge status="processing" text="Processing" />
    <br />
    <Badge status="warning" text="Warning" />
</template>
<script>
    export default {
    }
</script>

预设颜色

使用 type 属性，可以设置不同的颜色。

<template>
    <Badge :count="5" type="primary">
        <a href="#" class="demo-badge"></a>
    </Badge>
    <Badge :count="5" type="success">
        <a href="#" class="demo-badge"></a>
    </Badge>
    <Badge :count="5" type="normal">
        <a href="#" class="demo-badge"></a>
    </Badge>
    <Badge :count="5" type="info">
        <a href="#" class="demo-badge"></a>
    </Badge>
    <Badge :count="5" type="error">
        <a href="#" class="demo-badge"></a>
    </Badge>
    <Badge :count="5" type="warning">
        <a href="#" class="demo-badge"></a>
    </Badge>
</template>
<script>
    export default {
    }
</script>

API

Badge props