@wu-component/wu-badge v2.0.3

Badge 标记

出现在按钮、图标旁的数字或状态标记。

基础用法

展示新消息数量。

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-badge value="200" max="99" type="waring">
            <wu-plus-button size="mini">评论</wu-plus-button>
        </wu-plus-badge>
        <wu-plus-badge value="90" max="99" type="primary">
            <wu-plus-button size="mini">回复</wu-plus-button>
        </wu-plus-badge>
        <wu-plus-badge value="5" max="99" type="danger">
            <wu-plus-button size="mini">回复</wu-plus-button>
        </wu-plus-badge>
    </div>
</template>
<script>
</script>

:::

最大值

可自定义最大值。

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-badge value="200" max="100" type="waring">
            <wu-plus-button size="mini">评论</wu-plus-button>
        </wu-plus-badge>
        <wu-plus-badge value="15" max="20" type="primary">
            <wu-plus-button size="mini">回复</wu-plus-button>
        </wu-plus-badge>
    </div>
</template>
<script>
</script>

:::

自定义内容

可以显示数字以外的文本内容。

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-badge value="new" type="waring">
            <wu-plus-button size="mini">评论</wu-plus-button>
        </wu-plus-badge>
        <wu-plus-badge value="hot" max="20" type="primary">
            <wu-plus-button size="mini">回复</wu-plus-button>
        </wu-plus-badge>
    </div>
</template>
<script>
</script>

:::

小红点

以红点的形式标注需要关注的内容。

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-badge dot="true" type="waring">
           数据查询
        </wu-plus-badge>
        <wu-plus-badge dot="true" type="success">
            <wu-plus-button size="mini">回复</wu-plus-button>
        </wu-plus-badge>
    </div>
</template>
<script>
</script>

:::

Attributes