更新记录

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

v1.0.0

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

平台兼容性

d-avatar 头像组件

一个灵活的头像组件，支持图片显示和文字头像，适用于用户头像、群组头像等场景。

功能特点

• 支持图片头像和文字头像
• 可自定义头像大小和边距
• 支持自定义背景颜色
• 文字头像支持自定义截取方向和长度
• 响应式设计，适配不同尺寸

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

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

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

export default {
  components: {
    MyAvatar
  }
}

基础用法

<!-- 图片头像 -->
<my-avatar src="https://example.com/avatar.jpg" />

<!-- 文字头像 -->
<my-avatar name="王冰冰" />

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

属性说明

使用示例

1. 基础图片头像

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

2. 基础文字头像

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

3. 自定义样式

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

4. 自定义边距

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

5. 自定义文字截取

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

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

注意事项

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

更新日志

v1.0.0

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