fs-badge 徽章组件

徽章组件，用于在其他组件的右上角显示消息数量或状态。

使用方法

局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "fs-badge": "ava-ui/fxui/fs-badge/index"
}

代码演示

基础用法

API

属性

属性名	类型	默认值	说明
content	String/Number	''	徽章内容，支持数字和文字
icon	String	''	图标名称（iconfont类名），如：icon-star
max	Number	99	最大显示数字，超过显示为 max+
dot	Boolean	false	是否显示小红点
type	String	'filled'	徽章类型：filled(填充胶囊) / outlined(边框圆形)
size	String	'medium'	徽章尺寸：small(12px) / medium(16px) / large(20px)
color	String	'#ff4444'	徽章颜色
offset	Array	null	设置徽章的位置偏移，示例：[-10, 20] 或 ['10rpx', '8rpx']
contentStyle	String	''	徽章内容的自定义样式
extStyle	String	''	外部样式

插槽

插槽名	说明
default	被徽章包装的内容

使用示例

数字徽章

<fs-badge content="5">
  <view class="target">目标元素</view>
</fs-badge>

文字徽章

<fs-badge content="new">
  <view class="target">目标元素</view>
</fs-badge>

图标徽章

<fs-badge icon="icon-star">
  <view class="target">目标元素</view>
</fs-badge>

小红点

<fs-badge dot>
  <view class="target">目标元素</view>
</fs-badge>

边框圆形样式

<fs-badge content="5" type="outlined">
  <view class="target">目标元素</view>
</fs-badge>

不同尺寸

<!-- 小尺寸 -->
<fs-badge content="5" size="small">
  <view class="target">目标元素</view>
</fs-badge>

<!-- 中等尺寸（默认） -->
<fs-badge content="5" size="medium">
  <view class="target">目标元素</view>
</fs-badge>

<!-- 大尺寸 -->
<fs-badge content="5" size="large">
  <view class="target">目标元素</view>
</fs-badge>

自定义颜色

<!-- 填充胶囊样式 -->
<fs-badge content="3" color="#1890ff" type="filled">
  <view class="target">目标元素</view>
</fs-badge>

<!-- 边框圆形样式 -->
<fs-badge content="3" color="#1890ff" type="outlined">
  <view class="target">目标元素</view>
</fs-badge>

<!-- 图标徽章自定义颜色 -->
<fs-badge icon="icon-heart" color="#ff6b6b" type="filled">
  <view class="target">目标元素</view>
</fs-badge>

<fs-badge icon="icon-star" color="#52c41a" type="outlined">
  <view class="target">目标元素</view>
</fs-badge>

最大值限制

<fs-badge content="100" max="99">
  <view class="target">目标元素</view>
</fs-badge>

位置偏移

<!-- 数字偏移 -->
<fs-badge content="5" offset="{{[-10, 20]}}">
  <view class="target">目标元素</view>
</fs-badge>

<!-- 字符串偏移 -->
<fs-badge content="new" offset="{{['10rpx', '8rpx']}}">
  <view class="target">目标元素</view>
</fs-badge>

<!-- 混合偏移 -->
<fs-badge content="3" offset="{{[10, '5rpx']}}">
  <view class="target">目标元素</view>
</fs-badge>

自定义样式

<!-- 自定义字体大小 -->
<fs-badge content="5" contentStyle="font-size: 16px;">
  <view class="target">目标元素</view>
</fs-badge>

<!-- 自定义尺寸和圆角 -->
<fs-badge content="new" contentStyle="width: 40px; height: 20px; border-radius: 10px;">
  <view class="target">目标元素</view>
</fs-badge>

<!-- 自定义背景和文字颜色 -->
<fs-badge content="3" contentStyle="background: linear-gradient(45deg, #ff6b6b, #feca57); color: white;">
  <view class="target">目标元素</view>
</fs-badge>

<!-- 自定义边框样式 -->
<fs-badge content="1" type="outlined" contentStyle="border-width: 2px; border-style: dashed;">
  <view class="target">目标元素</view>
</fs-badge>

打开预览