指南组件

Badge 徽标

用于显示数字或状态的小标记

sKy
@skiyee
Source 
<template>
  <SkBadge content="6">
    <SkIcon name="i-lucide:bell" size="40rpx" />
  </SkBadge>
</template>

用法

Content 内容

Prop类型默认值描述
contentstring | number-设置徽标的显示的内容
<template>
  <SkBadge content="cat">
    <SkIcon name="i-lucide:cat" size="40rpx" />
  </SkBadge>
</template>

Shape 形状

当设置为 auto 时，徽标会根据内容长度自动判断是圆形还是矩形
Prop类型默认值描述
shape{Shape}auto设置徽标的形状
Shape描述
auto自动判断
circle圆形
dot圆点
rectangle矩形
<template>
  <div class="flex items-center flex-wrap gap-4 p-4">
    <SkBadge content="6">
      <SkButton>数字徽标</SkButton>
    </SkBadge>
    <SkBadge shape="dot">
      <SkButton>圆点徽标</SkButton>
    </SkBadge>
  </div>
</template>

Color 颜色

Prop类型默认值描述
color{Color}danger设置徽标的颜色主题
Color描述
brand品牌态颜色
success成功态颜色
warning警告态颜色
danger危险态颜色
neutral中性态颜色
<template>
  <div class="flex flex-wrap items-center gap-4 p-4">
    <SkBadge content="6" color="brand">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
    <SkBadge content="6" color="success">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
    <SkBadge content="6" color="warning">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
    <SkBadge content="6" color="danger">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
    <SkBadge content="6" color="neutral">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
  </div>
</template>

Size 大小

Prop类型默认值描述
size{Size}medium设置徽标的大小
Size描述
small小型徽标
medium中型徽标
large大型徽标
<template>
  <div class="flex flex-wrap items-center gap-4 p-4">
    <SkBadge content="6" size="small">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
    <SkBadge content="6" size="medium">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
    <SkBadge content="6" size="large">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
  </div>
</template>

Placement 位置

Prop类型默认值描述
placement{Placement}top-right设置徽标在包装元素中的显示位置
Placement描述
top-left左上角
top-right右上角
bottom-left左下角
bottom-right右下角
<template>
  <div class="grid grid-cols-2 gap-6 p-4">
    <SkBadge content="6" placement="top-left">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
    <SkBadge content="6" placement="top-right">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
    <SkBadge content="6" placement="bottom-left">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
    <SkBadge content="6" placement="bottom-right">
      <div class="size-9 rounded-lg bg-neutral-200" />
    </SkBadge>
  </div>
</template>

Boundless 无边框

Prop类型默认值描述
boundlessbooleanfalse设置徽标是否为无边框
<template>
  <div class="flex flex-wrap items-center gap-4 p-4">
    <SkBadge :content="6">
      <div class="size-10 rounded-full bg-neutral-300" />
    </SkBadge>
    <SkBadge :content="6" boundless>
      <div class="size-10 rounded-full bg-neutral-300" />
    </SkBadge>
  </div>
</template>

Hidden 隐藏

Prop类型默认值描述
hiddenbooleanfalse是否隐藏徽标
<template>
  <div class="flex flex-wrap items-center gap-4 p-4">
    <SkBadge content="6" :hidden="false">
      <SkButton>显示</SkButton>
    </SkBadge>
    <SkBadge content="6" hidden>
      <SkButton>隐藏</SkButton>
    </SkBadge>
    <SkBadge shape="dot" color="success">
      <SkButton>点状显示</SkButton>
    </SkBadge>
    <SkBadge shape="dot" color="warning" hidden>
      <SkButton>点状隐藏</SkButton>
    </SkBadge>
  </div>
</template>

例子

独立模式

当徽标没有包装任何子内容时，会自动进入独立模式，徽标将作为独立元素显示。

<template>
  <div class="flex flex-wrap items-center gap-4 p-4">
    <SkBadge :content="6">
      <SkButton>包装模式</SkButton>
    </SkBadge>
    <SkBadge :content="12" />
    <SkBadge shape="dot" color="success" />
    <SkBadge :content="999" color="danger" />
  </div>
</template>

自定义内容

通过 badge 插槽可以完全自定义徽标内容

<template>
  <div class="flex items-center gap-4 p-4">
    <SkBadge color="success">
      <template #badge>
        <SkIcon name="i-lucide:settings-2" size="20rpx" />
      </template>
      <SkButton>自定义内容</SkButton>
    </SkBadge>
  </div>
</template>

接口

Props

属性名类型默认值描述
contentstring | number-详见 Content 内容
shape{Shape}'auto'详见 Shape 形状
color{Color}'danger'详见 Color 颜色
size{Size}'medium'详见 Size 大小
placement{Placement}'top-right'详见 Placement 位置
boundlessbooleanfalse详见 Boundless 无边框
hiddenbooleanfalse详见 Hidden 隐藏

Slots

插槽名描述
default被徽标包装的内容
badge自定义徽标内容，优先级高于 content 属性

交互

正在完善中，敬请期待！😊

点颗星星 打赏项目