更新记录

0.0.8（2025-08-31） 下载此版本

• chore: 更新文档

0.0.7（2025-04-25） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.0.6（2025-02-09） 下载此版本

• chore: 更新文档

平台兼容性

云端兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-avatar 头像组件

一个功能丰富的头像组件，用于展示用户头像或图标。支持多种形状、尺寸、颜色等配置，可用于用户信息展示、评论列表、聊天界面等多种场景。组件提供了丰富的自定义选项，可以满足各种头像展示需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 头像组件文档 - 站点1
• 头像组件文档 - 站点2
• 头像组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-avatar
2. 导入后可能需要重新编译项目
3. 在页面中使用l-avatar和l-avatar-group组件

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础用法

最简单的头像组件用法，显示图片头像。

<l-avatar src="https://example.com/avatar.jpg"></l-avatar>

不同形状

头像支持圆形和方形两种形状。

<l-avatar src="https://example.com/avatar.jpg" shape="circle"></l-avatar>
<l-avatar src="https://example.com/avatar.jpg" shape="square"></l-avatar>

不同尺寸

头像支持多种预设尺寸，也可以自定义大小。

<l-avatar src="https://example.com/avatar.jpg" size="small"></l-avatar>
<l-avatar src="https://example.com/avatar.jpg" size="medium"></l-avatar>
<l-avatar src="https://example.com/avatar.jpg" size="large"></l-avatar>
<l-avatar src="https://example.com/avatar.jpg" size="48px"></l-avatar>

图标头像

使用图标作为头像内容。

<l-avatar icon="user"></l-avatar>

文字头像

使用文字作为头像内容。

<l-avatar>A</l-avatar>

自定义颜色

设置头像的背景颜色和文字颜色。

<l-avatar color="#1989fa" text-color="#ffffff">A</l-avatar>

头像组

多个头像组合展示，可以用于团队成员展示等场景。

<l-avatar-group>
  <l-avatar src="https://example.com/avatar1.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar2.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar3.jpg"></l-avatar>
</l-avatar-group>

头像组最大显示数量

通过max设置最多显示多少个，超过后显示一个折叠的头像，如+5,通过collapseText可设置折叠头像显示的内容。

<l-avatar-group :max="5" collapseFontSize="20rpx"  collapseText="更多" cascading="left-up">
    <l-avatar src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"></l-avatar>
    <l-avatar src="https://tdesign.gtimg.com/mobile/demos/avatar2.png"></l-avatar>
    <l-avatar src="https://tdesign.gtimg.com/mobile/demos/avatar3.png"></l-avatar>
    <l-avatar src="https://tdesign.gtimg.com/mobile/demos/avatar4.png"></l-avatar>
    <l-avatar color="#3283ff">陈</l-avatar>
    <l-avatar color="#3283ff">王</l-avatar>
    <l-avatar color="#3283ff">李</l-avatar>
    <l-avatar color="#3283ff">黄</l-avatar>
</l-avatar-group>

头像组层叠方向

设置头像组中头像的层叠方向。

<l-avatar-group cascading="left-up">
  <l-avatar src="https://example.com/avatar1.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar2.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar3.jpg"></l-avatar>
</l-avatar-group>

<l-avatar-group cascading="right-up">
  <l-avatar src="https://example.com/avatar1.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar2.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar3.jpg"></l-avatar>
</l-avatar-group>

自定义折叠头像

自定义超出最大显示数量时的折叠头像样式。

<l-avatar-group 
  :max="3" 
  collapse-text="+2" 
  collapse-color="#1989fa" 
  collapse-text-color="#ffffff"
>
  <l-avatar src="https://example.com/avatar1.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar2.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar3.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar4.jpg"></l-avatar>
  <l-avatar src="https://example.com/avatar5.jpg"></l-avatar>
</l-avatar-group>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-avatar/components/lime-avatar -->
<lime-avatar />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Avatar Props 属性说明

AvatarGroup Props 属性说明

Avatar Slots 插槽

AvatarGroup Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助