APIs
| 参数 | 说明 | 类型 | 默认值 | 必传 |
|---|
| color | 自定义小圆点的颜色，优先级高于 status | PresetColor | string | ‘’ | false |
| value | 展示的数字或文字，为数字时大于 max 显示为 max+，为 0 时隐藏 | number | string | slot | undefined | false |
| max | 展示封顶的数字值 | number | 99 | false |
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | false |
| dot | 不展示数字，只有一个小红点 | boolean | false | false |
| offset | 设置状态点的位置偏移，距默认位置左侧、上方的偏移量 [x, y]: [水平偏移, 垂直偏移] | [number | string, number | string] | undefined | false |
| status | 设置 Badge 为状态点 | Status | undefined | false |
| text | 在设置了 status 的前提下有效，设置状态点的文本 | string | slot | ‘’ | false |
| valueStyle | 设置徽标的样式 | CSSProperties | {} | false |
| zIndex | 设置徽标的 z-index | number | 9 | false |
| title | 设置鼠标放在状态点上时显示的文字 | string | ‘’ | false |
| ripple | 是否开启涟漪动画效果 | boolean | true | false |
PresetColor Enum Type
| 成员名 | 值 |
|---|
| pink | ‘pink’ |
| red | ‘red’ |
| yellow | ‘yellow’ |
| orange | ‘orange’ |
| cyan | ‘cyan’ |
| green | ‘green’ |
| blue | ‘blue’ |
| purple | ‘purple’ |
| geekblue | ‘geekblue’ |
| magenta | ‘magenta’ |
| volcano | ‘volcano’ |
| gold | ‘gold’ |
| lime | 'lime |
Status Enum Type
| 成员名 | 值 |
|---|
| success | ‘success’ |
| processing | ‘processing’ |
| default | ‘default’ |
| error | ‘error’ |
| warning | ‘warning’ |
创建徽标数组件Badge.vue
<script setup lang="ts">
import { computed, useSlots } from 'vue'
import type { CSSProperties } from 'vue'
enum PresetColor {
pink = 'pink',
red = 'red',
yellow = 'yellow',
orange = 'orange',
cyan = 'cyan',
green = 'green',
blue = 'blue',
purple = 'purple',
geekblue = 'geekblue',
magenta = 'magenta',
volcano = 'volcano',
gold = 'gold',
lime = 'lime'
}
enum Status {
success = 'success',
processing = 'processing',
default = 'default',
error = 'error',
warning = 'warning'
}
interface Props {
color?: PresetColor | string
value?: number | string
max?: number
showZero?: boolean
dot?: boolean
offset?: [number | string, number | string]
status?: Status
text?: string
valueStyle?: CSSProperties
zIndex?: number
title?: string
ripple?: boolean
}
const props = withDefaults(defineProps<Props>(), {
color: '',
value: undefined,
max: 99,
showZero: false,
dot: false,
offset: undefined,
status: undefined,
text: '',
valueStyle: () => ({}),
zIndex: 9,
title: '',
ripple: true
})
const customStyle = computed(() => {
if (props.color && !Object.keys(PresetColor).includes(props.color)) {
if ((props.value !== undefined && props.value !== 0) || (props.showZero && props.value === 0)) {
return {
backgroundColor: props.color
}
} else {
return {
color: props.color,
backgroundColor: props.color
}
}
}
})
const presetClass = computed(() => {
if (props.color) {
if (Object.keys(PresetColor).includes(props.color)) {
if ((props.value !== undefined && props.value !== 0) || (props.showZero && props.value === 0)) {
return `color-${props.color} white`
} else {
return 'color-' + props.color
}
}
}
if (props.status) {
if ((props.value !== undefined && props.value !== 0) || (props.showZero && props.value === 0)) {
return `status-${props.status} white`
} else {
return 'status-' + props.status
}
}
return
})
const slots = useSlots()
const showContent = computed(() => {
if (props.value !== undefined || props.dot || (!props.color && !props.status)) {
const defaultSlots = slots.default?.()
if (defaultSlots) {
return Boolean(defaultSlots[0].children !== 'v-if' && defaultSlots?.length)
}
}
return false
})
const showValue = computed(() => {
if (!props.color && !props.status) {
const valueSlots = slots.value?.()
return Boolean(valueSlots?.length)
}
return false
})
const showBadge = computed(() => {
if ((props.value !== undefined && props.value !== 0) || (props.showZero && props.value === 0) || props.dot) {
return true
}
return false
})
const dotOffestStyle = computed(() => {
if (props.offset?.length) {
return {
right: isNumber(props.offset[0]) ? -props.offset[0] + 'px' : handleOffset(props.offset[0] as string),
marginTop: isNumber(props.offset[1]) ? props.offset[1] + 'px' : props.offset[1]
}
}
return {}
})
function isNumber(value: number | string): boolean {
return typeof value === 'number'
}
function handleOffset(value: string): string {
if (value.includes('-')) {
return value.replace('-', '')
} else {
return `-${value}`
}
}
</script>
<template>
<div
class="m-badge"
:class="{ 'badge-status-color': value === undefined && (color || status) }"
:style="[`--z-index: ${zIndex}`, value === undefined && !dot ? dotOffestStyle : null]"
>
<template v-if="value === undefined && !dot && (color || status)">
<span class="u-status-dot" :class="[presetClass, { 'dot-ripple': ripple }]" :style="customStyle"></span>
<span class="u-status-text">
<slot>{{ text }}</slot>
</span>
</template>
<template v-else>
<template v-if="showContent">
<slot></slot>
</template>
<span v-if="showValue" class="m-value" :class="{ 'only-number': !showContent }">
<slot name="value"></slot>
</span>
<Transition name="zoom" v-else>
<div
v-show="showBadge"
class="m-badge-value"
:class="[
{
'small-num': typeof value === 'number' && value < 10,
'only-number': !showContent,
'only-dot': showBadge && (value === undefined || (value === 0 && !showZero) || dot)
},
presetClass
]"
:style="[customStyle, dotOffestStyle, valueStyle]"
:title="title || (value !== undefined ? String(value) : '')"
>
<span v-if="!dot" class="m-number" style="transition: none 0s ease 0s">
<span class="u-number">{{ typeof value === 'number' && value > max ? max + '+' : value }}</span>
</span>
</div>
</Transition>
</template>
</div>
</template>
<style lang="less" scoped>
.zoom-enter-active {
animation: zoomBadgeIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
animation-fill-mode: both;
}
.zoom-leave-active {
animation: zoomBadgeOut 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
animation-fill-mode: both;
}
@keyframes zoomBadgeIn {
0% {
transform: scale(0) translate(50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(50%, -50%);
}
}
@keyframes zoomBadgeOut {
0% {
transform: scale(1) translate(50%, -50%);
}
100% {
transform: scale(0) translate(50%, -50%);
opacity: 0;
}
}
.m-badge {
position: relative;
display: inline-block;
width: fit-content;
font-size: 14px;
color: rgba(0, 0, 0, 0.88);
line-height: 1;
.u-status-dot {
position: relative;
top: -1px;
display: inline-block;
vertical-align: middle;
width: 6px;
height: 6px;
border-radius: 50%;
}
.dot-ripple {
&::after {
box-sizing: border-box;
position: absolute;
top: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
border-width: 1px;
border-style: solid;
border-color: inherit;
border-radius: 50%;
animation-name: dotRipple;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
content: '';
}
@keyframes dotRipple {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(2.4);
opacity: 0;
}
}
}
.u-status-text {
margin-inline-start: 8px;
color: rgba(0, 0, 0, 0.88);
font-size: 14px;
}
.m-value {
position: absolute;
top: 0;
z-index: var(--z-index);
inset-inline-end: 0;
transform: translate(50%, -50%);
transform-origin: 100% 0%;
}
.m-badge-value {
.m-value();
overflow: hidden;
padding: 0 8px;
min-width: 20px;
height: 20px;
color: #ffffff;
font-weight: normal;
font-size: 12px;
line-height: 20px;
white-space: nowrap;
text-align: center;
background: #ff4d4f;
border-radius: 10px;
box-shadow: 0 0 0 1px #ffffff;
transition: background 0.2s;
.m-number {
position: relative;
display: inline-block;
height: 20px;
transition: all 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
.u-number {
display: inline-block;
height: 20px;
margin: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
}
.small-num {
padding: 0;
}
.only-number {
position: relative;
top: auto;
display: block;
transform-origin: 50% 50%;
transform: none;
}
.only-dot {
width: 6px;
min-width: 6px;
height: 6px;
background: #ff4d4f;
border-radius: 100%;
box-shadow: 0 0 0 1px #ffffff;
padding: 0;
transition: background 0.3s;
}
.status-success {
color: #52c41a;
background-color: #52c41a;
}
.status-error {
color: #ff4d4f;
background-color: #ff4d4f;
}
.status-default {
color: rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.25);
}
.status-processing {
color: @themeColor;
background-color: @themeColor;
}
.status-warning {
color: #faad14;
background-color: #faad14;
}
.color-pink {
color: #eb2f96;
background-color: #eb2f96;
}
.color-red {
color: #f5222d;
background-color: #f5222d;
}
.color-yellow {
color: #fadb14;
background-color: #fadb14;
}
.color-orange {
color: #fa8c16;
background-color: #fa8c16;
}
.color-cyan {
color: #13c2c2;
background-color: #13c2c2;
}
.color-green {
color: #52c41a;
background-color: #52c41a;
}
.color-blue {
color: @themeColor;
background-color: @themeColor;
}
.color-purple {
color: #722ed1;
background-color: #722ed1;
}
.color-geekblue {
color: #2f54eb;
background-color: #2f54eb;
}
.color-magenta {
color: #eb2f96;
background-color: #eb2f96;
}
.color-volcano {
color: #fa541c;
background-color: #fa541c;
}
.color-gold {
color: #faad14;
background-color: #faad14;
}
.color-lime {
color: #a0d911;
background-color: #a0d911;
}
.white {
color: #ffffff;
}
}
.badge-status-color {
line-height: inherit;
vertical-align: baseline;
}
</style>
在要使用的页面引入
其中引入使用了以下组件：
<script setup lang="ts">
import Badge from './Badge.vue'
import { ref } from 'vue'
const value = ref(5)
const dot = ref(true)
const colors = [
'pink',
'red',
'yellow',
'orange',
'cyan',
'green',
'blue',
'purple',
'geekblue',
'magenta',
'volcano',
'gold',
'lime'
]
function decline() {
if (value.value >= 1) {
value.value--
}
}
function increase() {
value.value++
}
</script>
<template>
<div>
<h1>{{ $route.name }} {{ $route.meta.title }}</h1>
<h2 class="mt30 mb10">基本使用</h2>
<Space :gap="20">
<Badge :value="5">
<Avatar shape="square" size="large" />
</Badge>
<Badge :value="0" show-zero>
<Avatar shape="square" size="large" />
</Badge>
<Badge>
<template #value>
<svg
focusable="false"
class="u-svg"
data-icon="clock-circle"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
></path>
<path
d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
></path>
</svg>
</template>
<Avatar shape="square" size="large" />
</Badge>
</Space>
<h2 class="mt30 mb10">独立使用</h2>
<Space :gap="20">
<Badge :value="25" />
<Badge
:value="4"
:value-style="{
backgroundColor: '#fff',
color: '#999',
boxShadow: '0 0 0 1px #d9d9d9 inset'
}"
/>
<Badge :value="109" :value-style="{ backgroundColor: '#52c41a' }" />
</Space>
<h2 class="mt30 mb10">封顶数字</h2>
<Space :gap="30">
<Badge :value="99">
<Avatar shape="square" size="large" />
</Badge>
<Badge :value="100">
<Avatar shape="square" size="large" />
</Badge>
<Badge :value="99" :max="10">
<Avatar shape="square" size="large" />
</Badge>
<Badge :value="1000" :max="999">
<Avatar shape="square" size="large" />
</Badge>
</Space>
<h2 class="mt30 mb10">自定义内容</h2>
<Space :gap="30">
<Badge value="hello" :value-style="{ backgroundColor: '#1677FF' }">
<Avatar shape="square" size="large" />
</Badge>
<Badge>
<template #value>
<span class="u-value">world</span>
</template>
<Avatar shape="square" size="large" />
</Badge>
</Space>
<h2 class="mt30 mb10">自定义徽标样式</h2>
<Space :gap="30">
<Badge :value="99" :value-style="{ backgroundColor: 'magenta' }">
<Avatar shape="square" size="large" />
</Badge>
<Badge value="hello" :value-style="{ backgroundColor: 'gold' }">
<Avatar shape="square" size="large" />
</Badge>
<Badge dot :value-style="{ width: '10px', height: '10px', backgroundColor: 'purple' }">
<Avatar shape="square" size="large" />
</Badge>
</Space>
<h2 class="mt30 mb10">徽标偏移</h2>
<Space :gap="30">
<Badge value="9" :offset="[-20, 10]">
<Avatar shape="square" size="large" />
</Badge>
<Badge dot :offset="[-15, 10]">
<Avatar shape="square" size="large" />
</Badge>
<Badge dot status="success" :offset="['-50%', '30%']">
<Avatar shape="square" size="large" />
</Badge>
</Space>
<h2 class="mt30 mb10">小红点</h2>
<Badge dot>
<a href="#">Link something</a>
</Badge>
<h2 class="mt30 mb10">状态点</h2>
<Space :gap="10">
<Badge status="success" />
<Badge status="error" />
<Badge status="default" />
<Badge status="processing" />
<Badge status="warning" />
</Space>
<br />
<Space style="margin-top: 10px" vertical :gap="10">
<Badge status="success" text="Success" />
<Badge status="error" text="Error" />
<Badge status="default" text="Default" />
<Badge status="processing" text="Processing" />
<Badge status="warning" text="warning" />
</Space>
<h2 class="mt30 mb10">动态</h2>
<Flex gap="middle" vertical>
<Space :gap="20" align="center">
<Badge :value="value">
<Avatar shape="square" size="large" />
</Badge>
<Button @click="decline">
<svg
focusable="false"
data-icon="minus"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
</svg>
</Button>
<Button @click="increase">
<svg
focusable="false"
data-icon="plus"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
<path d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"></path>
</svg>
</Button>
</Space>
<Space :gap="20" align="center">
<Badge :dot="dot">
<Avatar shape="square" size="large" />
</Badge>
<Switch v-model:checked="dot" />
</Space>
</Flex>
<h2 class="mt30 mb10">自定义悬浮状态点的显示文字</h2>
<Badge :value="5" title="Custom hover text">
<Avatar shape="square" size="large" />
</Badge>
<h2 class="mt30 mb10">多彩徽标</h2>
<h4 class="mb10">Presets</h4>
<Space :gap="20">
<Badge v-for="color in colors" :key="color" :color="color" :text="color" />
</Space>
<h4 class="mt10 mb10">Custom</h4>
<Space :gap="20">
<Badge color="#f50" text="#f50" />
<Badge color="#2db7f5" text="#2db7f5" />
<Badge color="#87d068" text="#87d068" />
<Badge color="#108ee9" text="#108ee9" />
</Space>
</div>
</template>
<style lang="less" scoped>
.u-value {
display: inline-block;
line-height: 20px;
padding: 0 6px;
background-color: #faad14;
color: #fff;
border-radius: 10px;
box-shadow: 0 0 0 1px #ffffff;
}
.u-svg {
fill: #f5222d;
}
</style>
4382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
