Avatar 头像

头像组件，用于显示用户头像。

基础用法

<div id="demo-avatar"></div>

<script>
  const avatar = new SaAvatar('#demo-avatar', {
    size: 40,
    text: '用户'
  });
</script>

加载 SanoUI 组件中...

图片头像

通过 src 配置头像图片。

<div id="demo-avatar-img"></div>

<script>
  const avatar = new SaAvatar('#demo-avatar-img', {
    size: 40,
    src: '../../sanoui-portal/images/placeholder.svg'
  });
</script>

加载 SanoUI 组件中...

不同尺寸

通过 size 配置头像大小。

<div id="demo-avatar-sizes"></div>

<script>
  [24, 40, 60, 80].forEach(size => {
    const container = document.createElement('div');
    container.style.marginRight = '16px';
    container.style.display = 'inline-block';
    document.getElementById('demo-avatar-sizes').appendChild(container);
    new SaAvatar(container, {
      size: size,
      text: 'U'
    });
  });
</script>

加载 SanoUI 组件中...

不同形状

通过 shape 配置头像形状。

<div id="demo-avatar-shapes"></div>

<script>
  // 圆形头像
  new SaAvatar('#demo-avatar-shapes', {
    size: 50,
    shape: 'circle',
    text: 'U'
  });
  
  // 方形头像
  new SaAvatar('#demo-avatar-shapes', {
    size: 50,
    shape: 'square',
    text: 'U'
  });
</script>

加载 SanoUI 组件中...

文本头像

使用文本作为头像。

<div id="demo-avatar-text"></div>

<script>
  const avatar = new SaAvatar('#demo-avatar-text', {
    size: 50,
    text: '张三'
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaAvatarOptions	{}

配置选项

参数	说明	类型	可选值	默认值
size	头像大小	number	-	40
shape	头像形状	string	circle / square	circle
src	头像图片地址	string	-	-
text	头像文本	string	-	-
icon	头像图标	string	-	-

方法

方法名	说明	参数	返回值
setSrc	设置图片地址	src: string	void
setText	设置文本	text: string	void
destroy	销毁实例	-	void

示例代码

手动创建实例

// 文本头像
const avatar = new SaAvatar('#my-avatar', {
  size: 50,
  shape: 'circle',
  text: '张三'
});

// 图片头像
const avatarImg = new SaAvatar('#my-avatar-img', {
  size: 50,
  src: 'https://example.com/avatar.jpg'
});

// 更新图片
avatarImg.setSrc('https://example.com/new-avatar.jpg');

// 更新文本
avatar.setText('李四');

实际使用场景

场景 1：用户列表

在用户列表中使用头像展示用户信息。

<div id="user-list" style="display: flex; flex-direction: column; gap: 1rem;"></div>

<script>
  const users = [
    { id: 1, name: '张三', avatar: null },
    { id: 2, name: '李四', avatar: '../../sanoui-portal/images/placeholder.svg' },
    { id: 3, name: '王五', avatar: null }
  ];
  
  users.forEach(user => {
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.alignItems = 'center';
    container.style.gap = '1rem';
    document.getElementById('user-list').appendChild(container);
    
    const avatarContainer = document.createElement('div');
    container.appendChild(avatarContainer);
    
    const avatar = new SaAvatar(avatarContainer, {
      size: 40,
      src: user.avatar,
      text: user.name.charAt(0),
      shape: 'circle'
    });
    
    const info = document.createElement('div');
    info.innerHTML = `<div style="font-weight: 500;">${user.name}</div><div style="font-size: 0.875rem; color: #999;">用户ID: ${user.id}</div>`;
    container.appendChild(info);
  });
</script>

加载 SanoUI 组件中...