Badge 标记

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

吸引用户的注意力用的

import { DuBadge } from 'dangoui'

示例

<template>
  <PreviewBlock title="简单">
    <DuBadge :value="10" dot>
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
    <DuBadge :value="10">
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
  </PreviewBlock>
  <PreviewBlock title="文字">
    <div class="flex flex-col gap-y-16px">
      <DuBadge value="热门">
        <div class="w-50px h-50px bg-gray-200 rounded-4px" />
      </DuBadge>
      <DuBadge value="拼团9.9">
        <div class="w-50px h-50px bg-gray-200 rounded-4px" />
      </DuBadge>
    </div>
  </PreviewBlock>
  <PreviewBlock title="总是显示">
    <DuBadge dot always-show>
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
    <DuBadge :value="0" always-show>
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
  </PreviewBlock>
  <PreviewBlock title="不同颜色（色板）">
    <DuBadge dot always-show color="primary">
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
    <DuBadge dot always-show color="secondary">
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
    <DuBadge dot always-show color="success">
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
    <DuBadge dot always-show color="warning">
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
    <DuBadge dot always-show color="error">
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
  </PreviewBlock>
  <PreviewBlock title="直接指定 hex 颜色">
    <DuBadge dot always-show color="#ed64a5">
      <div class="w-50px h-50px bg-gray-200 rounded-4px" />
    </DuBadge>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuBadge } from 'dangoui'
</script>

单独使用

如果不给 Badge 组件的 default slot 传内容，红点会按照相对定位显示，可以独立使用

<template>
  <PreviewBlock title="显示红点">
    <div class="flex items-center gap-x-8px">
      <div class="c-neutral-600 text-14px">你有新消息</div>
      <DuBadge dot always-show />
    </div>
  </PreviewBlock>
  <PreviewBlock title="显示数量">
    <div class="flex items-center gap-x-8px">
      <div class="c-neutral-600 text-14px">你有新消息</div>
      <DuBadge :value="100" :max="99" />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuBadge } from 'dangoui'
</script>

API

属性

属性名	类型	默认值	说明
color	"default" \| "error" \| `#${string}` \| "primary" \| "secondary" \| "success" \| "warning"	`"error"`
dot	`boolean`	`false`	是否只显示小圆点
value	`string \| number`	`""`	如果为数字 0 或者空字符的时候会隐藏红点
max	`number`	-	如果传入的 value 是数字，超过 max 会显示 {max}+
always-show	`boolean`	`false`	总是显示

插槽

名称
default