更新记录

1.0.2（2025-05-27） 下载此版本

1.支持头像背景颜色增加渐变 2.增加 头像组 列表展示方式

1.0.1（2025-05-21） 下载此版本

增加使用案例，优化背景颜色，支持自定义截取文字数量

1.0.0（2025-05-19） 下载此版本

v1.0.0

• 初始版本发布
• 支持图片和文字头像
• 支持自定义样式和边距
• 支持文字截取方向和长度控制

平台兼容性

uni-app

其他

d-avatar 头像组件

可能是最全的自定义头像组件，支持 “ 单头像 ” 和 “ 头像组 ” 展示，具有丰富的自定义选项。

功能特点

• 1.支持单头像和头像组两种模式
• 2.支持图片头像和文字头像
• 3.支持自定义背景颜色
• 4.支持自定义尺寸和位置
• 5.支持头像组重叠效果
• 6.支持显示剩余数量（+N）
• 7.支持文字头像的多种显示方式

安装使用 （官方下载的话不需要引用，会自动注入，可忽略）

1. 将组件复制到您的项目中
2. 在需要使用的页面引入组件

import MyAvatar from '@/components/d-avatar.vue'

export default {
  components: {
    MyAvatar
  }
}

基础用法

<template>
  <!-- 单头像 -->
  <d-avatar 
    src="https://example.com/avatar.jpg"
    name="张三"
    width="80rpx"
  />

  <!-- 头像组 -->
  <d-avatar 
    :avatarList="[
      { src: 'https://example.com/avatar1.jpg', name: '张三' },
      { src: 'https://example.com/avatar2.jpg', name: '李四' },
      { name: '王五', bg: '#1bb8af' }
    ]"
    :maxVisible="5"
    :showMoreCount="true"
  />

  <!-- 自定义大小和边距 -->
  <d-avatar 
    name="王冰冰" 
    width="100rpx"
    top="10px"
    right="20px"
    bottom="10px"
    left="20px"
  />

</template>

属性说明

单头像模式属性

头像组模式属性

使用示例

1. 基础图片头像

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

2. 基础文字头像

<d-avatar name="王冰冰" />

3. 自定义样式

<d-avatar 
  name="王冰冰" 
  width="100rpx"
  bg="#FFE4E1"
  size="16px"
/>

4. 自定义边距

<d-avatar 
  name="王冰冰" 
  :top="10"
  :right="20"
  :bottom="10"
  :left="20"
/>

5. 自定义文字截取

<!-- 从前向后取3个字符 -->
<d-avatar 
  name="王冰冰丰" 
  :keep-length="3"
  :direction="2"
/>

<!-- 从后向前取1个字符 -->
<d-avatar 
  name="王冰冰丰" 
  :keep-length="1"
  :direction="1"
/>

单头像示例

<d-avatar 
  src="https://example.com/avatar.jpg"
  name="张三"
  width="100rpx"
  bg="#1bb8af"
  size="14px"
  keepLength="2"
  direction="1"
/>

头像组示例

<d-avatar 
  :avatarList="[
    { src: 'https://example.com/avatar1.jpg', name: '张三' },
    { name: '李四', bg: '#1bb8af' },
    { name: '王五', bg: '#f56a00' }
  ]"
  :maxVisible="3"
  :showMoreCount="true"
  width="60rpx"
/>

## 注意事项

1. 当同时设置 `src` 和 `name` 时，优先显示图片头像
2. 文字头像会自动截取指定长度的字符
3. 所有尺寸相关的属性都支持 rpx 单位
4. 边距属性支持数字或带单位的字符串

## 更新日志

### v1.0.0
- 初始版本发布
- 支持图片和文字头像
- 支持自定义样式和边距
- 支持文字截取方向和长度控制