NaEasy UI

Appearance

Badge 徽标 ​

徽标组件通常用于在头像、按钮等元素上显示小红点或者数量，以提醒用户有新消息或未读通知。

导入 ​

js
import Badge from '@/components/display/Badge.vue'

用法 ​

基础用法 ​

支持显示圆点、数字、文字，显示数字时支持最大值，超出最大值会以最大值+的形式显示。

vue
<template>
  <FlexRow :gap="20" wrap>
    <Badge>
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge content="1">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge content="new">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge content="新" border>
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge :content="1000" :maxCount="99" border>
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
  </FlexRow>
</template>

切换时有动画效果 ​

通过 anim 属性设置切换时的动画效果。

vue
<template>
  <FlexRow :gap="20" wrap>
    <Badge :show="show" anim>
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge :show="show" anim :content="count">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge :show="show" anim :content="count" :maxCount="99">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
  </FlexRow>
  <Height :size="30" />
  <FlexRow :gap="20" wrap>
    <Button @click="show=!show">显示/隐藏</Button>
    <Button @click="count--">数量-1</Button>
    <Button @click="count++">数量+1</Button>
  </FlexRow>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(true)
const count = ref(1)
</script>

不同颜色的徽标 ​

通过 color 属性设置不同颜色的徽标。

vue
<template>
  <FlexRow :gap="20" wrap>
    <Badge>
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge color="primary">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge color="success">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge color="warning">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
  </FlexRow>
</template>

不同位置的徽标 ​

通过 position 属性设置徽标在父元素中的位置。

vue
<template>
  <FlexRow :gap="20" wrap>
    <Badge>
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge position="bottomLeft" color="primary">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge position="topLeft" color="success">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
    <Badge position="bottomRight" color="warning">
      <view style="width: 80rpx; height: 80rpx; background-color: #f5f5f5;"></view>
    </Badge>
  </FlexRow>
</template>

独立展示 ​

通过 standalone 属性设置徽标独立展示，不依附于其他元素。

vue
<template>
  <FlexRow :gap="20" center>
    <Badge standalone />
    <Badge standalone color="primary" />
    <Badge standalone color="success" />
    <Badge standalone color="warning" />
    <Badge standalone color="danger" />
  </FlexRow>
  <Height :size="20" />
  <FlexRow :gap="20" center>
    <Badge standalone />
    <Badge standalone content="1" />
    <Badge standalone content="new" border />
  </FlexRow>
</template>

API 参考 ​

Badge ​

徽标组件。

Props ​

名称说明类型必填默认值
show控制是否显示boolean-true
standalone独立显示，不依附于其他元素boolean-false
content徽标内容，支持数字或文本string/number-''
maxCount徽标数字最大值，超过则显示 xx+number--
color徽标颜色string-'danger'
border是否增加描边boolean-false
borderWidth描边宽度number-4
borderColor描边颜色string-'white'
position徽标在父级所处位置'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft'-'topRight'
anim是否在切换时有动画效果boolean-false
offset徽标定位偏移{ x: number, y: number }-{ x: 0, y: 0 }
badgeStyle徽标自定义样式object-{}
textStyle徽标文字自定义样式object-{}
containerStyle外层容器样式object-{}
badgeSize徽标无文字情况下的徽标大小number-18
fontSize字号number-24
radius圆角的大小number-20
paddingVertical徽标有文字情况下的垂直内边距number-4
paddingHorizontal徽标有文字情况下的水平内边距number-8
hiddenIfZero如果 content===0 是否隐藏红点boolean-true

Slots ​

名称说明
default用于放置需要显示徽标的元素

主题变量 ​

名称类型默认值说明
BadgeAnimbooleanfalse是否默认显示动画
BadgeBorderbooleanfalse是否默认显示边框
BadgeBorderWidthnumber4默认边框宽度
BadgeBorderColorstring'white'默认边框颜色
BadgePositionstring'topRight'默认徽标位置
BadgeOffsetobject{ x: 0, y: 0 }默认徽标偏移
BadgeSizenumber18默认徽标大小
BadgeRadiusnumber20默认圆角大小
BadgeFontSizenumber24默认文字大小
BadgePaddingVerticalnumber4默认垂直内边距
BadgePaddingHorizontalnumber8默认水平内边距
BadgeTextColorstring'white'徽标文字颜色