JView UI

Appearance

Badge 徽章组件，一般出现在通知图标或头像的右上角，显示需要处理的消息条数，通过醒目的视觉形式吸引用户处理。

基本展示 ​

默认情况下，count值超过99时角标会显示99+，可以通过修改overflowCount配置最大展示数字。

当count属性值为0时，默认不展示徽章，但是可以通过showZero让其展示出来。

如果组件下不包裹任何元素，独立展示也是 OK 的！

V9
U99
E99+
E999
0
00
99
99+
展开查看代码
vue
<template>
    <j-space gap="24px">
        <j-badge :count="9">
            <j-avatar shape="square">V</j-avatar>
        </j-badge>
        <j-badge :count="99">
            <j-avatar shape="square">U</j-avatar>
        </j-badge>
        <j-badge :count="999">
            <j-avatar shape="square">E</j-avatar>
        </j-badge>
        <j-badge :count="999" :overflowCount="1000">
            <j-avatar shape="square">E</j-avatar>
        </j-badge>
        <j-badge :count="0">
            <j-avatar shape="square">0</j-avatar>
        </j-badge>
        <j-badge :count="0" show-zero>
            <j-avatar shape="square">0</j-avatar>
        </j-badge>
        <j-badge :count="99"></j-badge>
        <j-badge :count="100" color="blue"></j-badge>
    </j-space>
</template>
<template>
    <j-space gap="24px">
        <j-badge :count="9">
            <j-avatar shape="square">V</j-avatar>
        </j-badge>
        <j-badge :count="99">
            <j-avatar shape="square">U</j-avatar>
        </j-badge>
        <j-badge :count="999">
            <j-avatar shape="square">E</j-avatar>
        </j-badge>
        <j-badge :count="999" :overflowCount="1000">
            <j-avatar shape="square">E</j-avatar>
        </j-badge>
        <j-badge :count="0">
            <j-avatar shape="square">0</j-avatar>
        </j-badge>
        <j-badge :count="0" show-zero>
            <j-avatar shape="square">0</j-avatar>
        </j-badge>
        <j-badge :count="99"></j-badge>
        <j-badge :count="100" color="blue"></j-badge>
    </j-space>
</template>

定制数字部分 ​

徽章的数字部分是可以通过插槽定制的。

V
U
E
展开查看代码
vue
<template>
    <j-space gap="24px">
        <j-badge>
            <template #count>
                <Loader spin />
            </template>
            <j-avatar shape="square">V</j-avatar>
        </j-badge>

        <j-badge color="blue">
            <template #count>
                <Loader spin />
            </template>
            <j-avatar shape="square">U</j-avatar>
        </j-badge>

        <j-badge color="green">
            <template #count>
                <Loader spin />
            </template>
            <j-avatar shape="square">E</j-avatar>
        </j-badge>

        <j-badge color="blue">
            <template #count>
                <Loader spin />
            </template>
        </j-badge>
    </j-space>
</template>

<script lang="ts" setup>
import { Loader } from '@jview/icons'
</script>
<template>
    <j-space gap="24px">
        <j-badge>
            <template #count>
                <Loader spin />
            </template>
            <j-avatar shape="square">V</j-avatar>
        </j-badge>

        <j-badge color="blue">
            <template #count>
                <Loader spin />
            </template>
            <j-avatar shape="square">U</j-avatar>
        </j-badge>

        <j-badge color="green">
            <template #count>
                <Loader spin />
            </template>
            <j-avatar shape="square">E</j-avatar>
        </j-badge>

        <j-badge color="blue">
            <template #count>
                <Loader spin />
            </template>
        </j-badge>
    </j-space>
</template>

<script lang="ts" setup>
import { Loader } from '@jview/icons'
</script>

仅展示小红点 ​

某些情况下，希望通过一种微弱的表现形式告知用户，此时仅展示一个小红点是非常适合的。

你只需设置dot属性值为true。

同时要注意，此时count属性将失效。

V
U
E
展开查看代码
vue
<template>
    <j-space gap="24px">
        <j-badge dot title="有新的消息">
            <j-avatar shape="square">V</j-avatar>
        </j-badge>
        <j-badge :count="10" dot title="有新的消息">
            <j-avatar shape="square">U</j-avatar>
        </j-badge>
        <j-badge dot color="blue" title="有新的消息">
            <j-avatar shape="square">E</j-avatar>
        </j-badge>
        <j-badge dot title="看我干嘛"></j-badge>
    </j-space>
</template>
<template>
    <j-space gap="24px">
        <j-badge dot title="有新的消息">
            <j-avatar shape="square">V</j-avatar>
        </j-badge>
        <j-badge :count="10" dot title="有新的消息">
            <j-avatar shape="square">U</j-avatar>
        </j-badge>
        <j-badge dot color="blue" title="有新的消息">
            <j-avatar shape="square">E</j-avatar>
        </j-badge>
        <j-badge dot title="看我干嘛"></j-badge>
    </j-space>
</template>

尺寸 ​

通过size属性控制徽章尺寸。

V6
U6
展开查看代码
vue
<template>
    <j-space gap="24px">
        <j-badge :count="6">
            <j-avatar shape="square">V</j-avatar>
        </j-badge>
        <j-badge :count="6" size="small">
            <j-avatar shape="square">U</j-avatar>
        </j-badge>
    </j-space>
</template>
<template>
    <j-space gap="24px">
        <j-badge :count="6">
            <j-avatar shape="square">V</j-avatar>
        </j-badge>
        <j-badge :count="6" size="small">
            <j-avatar shape="square">U</j-avatar>
        </j-badge>
    </j-space>
</template>

颜色 ​

通过color属性控制徽章颜色，我们内置了一些颜色，也可以自定义。

9
99
99+
9
99
99+
9
99
99+
99+
99+
99+
99+
99+
99+
展开查看代码
vue
<template>
    <j-space gap="24px" wrap>
        <j-badge :count="9" color="red">
            <j-button>red</j-button>
        </j-badge>
        <j-badge :count="99" color="pink">
            <j-button>pink</j-button>
        </j-badge>
        <j-badge :count="999" color="yellow">
            <j-button>yellow</j-button>
        </j-badge>
        <j-badge :count="9" color="orange">
            <j-button>orange</j-button>
        </j-badge>
        <j-badge :count="99" color="cyan">
            <j-button>cyan</j-button>
        </j-badge>
        <j-badge :count="999" color="green">
            <j-button>green</j-button>
        </j-badge>
        <j-badge :count="9" color="blue">
            <j-button>blue</j-button>
        </j-badge>
        <j-badge :count="99" color="geekblue">
            <j-button>geekblue</j-button>
        </j-badge>
        <j-badge :count="999" color="magenta">
            <j-button>magenta</j-button>
        </j-badge>
        <j-badge :count="999" color="volcano">
            <j-button>volcano</j-button>
        </j-badge>
        <j-badge :count="999" color="gold">
            <j-button>gold</j-button>
        </j-badge>
        <j-badge :count="999" color="lime">
            <j-button>lime</j-button>
        </j-badge>
        <j-badge :count="999" color="#cd853f">
            <j-button>#cd853f</j-button>
        </j-badge>
        <j-badge :count="999" color="#cccc4d">
            <j-button>#cccc4d</j-button>
        </j-badge>
        <j-badge :count="999" color="#30d5c8">
            <j-button>#30d5c8</j-button>
        </j-badge>
    </j-space>
</template>
<template>
    <j-space gap="24px" wrap>
        <j-badge :count="9" color="red">
            <j-button>red</j-button>
        </j-badge>
        <j-badge :count="99" color="pink">
            <j-button>pink</j-button>
        </j-badge>
        <j-badge :count="999" color="yellow">
            <j-button>yellow</j-button>
        </j-badge>
        <j-badge :count="9" color="orange">
            <j-button>orange</j-button>
        </j-badge>
        <j-badge :count="99" color="cyan">
            <j-button>cyan</j-button>
        </j-badge>
        <j-badge :count="999" color="green">
            <j-button>green</j-button>
        </j-badge>
        <j-badge :count="9" color="blue">
            <j-button>blue</j-button>
        </j-badge>
        <j-badge :count="99" color="geekblue">
            <j-button>geekblue</j-button>
        </j-badge>
        <j-badge :count="999" color="magenta">
            <j-button>magenta</j-button>
        </j-badge>
        <j-badge :count="999" color="volcano">
            <j-button>volcano</j-button>
        </j-badge>
        <j-badge :count="999" color="gold">
            <j-button>gold</j-button>
        </j-badge>
        <j-badge :count="999" color="lime">
            <j-button>lime</j-button>
        </j-badge>
        <j-badge :count="999" color="#cd853f">
            <j-button>#cd853f</j-button>
        </j-badge>
        <j-badge :count="999" color="#cccc4d">
            <j-button>#cccc4d</j-button>
        </j-badge>
        <j-badge :count="999" color="#30d5c8">
            <j-button>#30d5c8</j-button>
        </j-badge>
    </j-space>
</template>

状态点 ​

通过status属性控制展示一些内置的状态点。

status-text可配置展示相关的文字。

Success
Warning
Error
Processing
Default
展开查看代码
vue
<template>
    <j-space>
        <j-badge status="success"></j-badge>
        <j-badge status="warning"></j-badge>
        <j-badge status="error"></j-badge>
        <j-badge status="processing"></j-badge>
        <j-badge status="default"></j-badge>
    </j-space>

    <j-space style="margin-top: 20px; width: 100%" direction="column">
        <j-badge status="success" status-text="Success"></j-badge>
        <j-badge status="warning" status-text="Warning"></j-badge>
        <j-badge status="error" status-text="Error"></j-badge>
        <j-badge status="processing" status-text="Processing"></j-badge>
        <j-badge status="default" status-text="Default"></j-badge>
    </j-space>
</template>
<template>
    <j-space>
        <j-badge status="success"></j-badge>
        <j-badge status="warning"></j-badge>
        <j-badge status="error"></j-badge>
        <j-badge status="processing"></j-badge>
        <j-badge status="default"></j-badge>
    </j-space>

    <j-space style="margin-top: 20px; width: 100%" direction="column">
        <j-badge status="success" status-text="Success"></j-badge>
        <j-badge status="warning" status-text="Warning"></j-badge>
        <j-badge status="error" status-text="Error"></j-badge>
        <j-badge status="processing" status-text="Processing"></j-badge>
        <j-badge status="default" status-text="Default"></j-badge>
    </j-space>
</template>

缎带效果 ​

BadgeRibbon 组件是一个缎带的效果。

可以通过placement调整缎带的位置，默认是展示在右侧。

Ribbon上的文字
Ribbon上的文字
Ribbon上的文字
展开查看代码
vue
<template>
    <div class="ribbon-demo">
        <j-badge-ribbon text="Ribbon上的文字">
            <j-button block>Card</j-button>
        </j-badge-ribbon>
        <j-badge-ribbon text="Ribbon上的文字" color="lime">
            <j-button block>Card</j-button>
        </j-badge-ribbon>
        <j-badge-ribbon text="Ribbon上的文字" placement="start">
            <j-button block>Card</j-button>
        </j-badge-ribbon>
    </div>
</template>

<style lang="less" scoped>
.ribbon-demo {
    .j-button {
        padding: 40px 20px;
        margin-top: 20px;
    }
}
</style>
<template>
    <div class="ribbon-demo">
        <j-badge-ribbon text="Ribbon上的文字">
            <j-button block>Card</j-button>
        </j-badge-ribbon>
        <j-badge-ribbon text="Ribbon上的文字" color="lime">
            <j-button block>Card</j-button>
        </j-badge-ribbon>
        <j-badge-ribbon text="Ribbon上的文字" placement="start">
            <j-button block>Card</j-button>
        </j-badge-ribbon>
    </div>
</template>

<style lang="less" scoped>
.ribbon-demo {
    .j-button {
        padding: 40px 20px;
        margin-top: 20px;
    }
}
</style>

Badge 属性 ​

参数说明类型默认值必填
color小圆点的颜色string无否
count展示的数字，默认为 0 时隐藏 badgenumber | VNode无否
showZerocount 为 0 时，也展示 badgeboolean无否
overflowCount展示封顶的数字值，超过则会展示 ${overflowCount}+number99否
dot不展示数字，只有一个小圆点boolean无否
status内置的几种状态"default" | "error" | "success" | "warning" | "processing"无否
statusText在设置了 status 的前提下有效，设置状态点的文本string无否
title设置鼠标放在 badge 时显示的文字string无否
badgeStyle定制 badge 样式CSSProperties无否
sizebadge 尺寸"default" | "small"'default'否

Badge.Ribbon 属性 ​

参数说明类型默认值必填
color缎带的颜色string无否
placement缎带的位置，默认靠右"end" | "start"'end'否
text缎带上的文字string | VNode无否

Copyright © 2022-2024 All Rights Reserved by Tusi.