Avatar 头像

像素风格头像组件，用于显示用户文字首字母缩写。

?

名称	分类	说明	类型	默认值
shape	? 风格	形状	'circle' | 'square'	'circle'
border	? 风格	是否显示边框	boolean	true
size	? 尺寸	尺寸	'large' | 'default' | 'small'	'default'
color	? 颜色	自定义十六进制背景颜色	string	—
default	? 插槽	头像内容（如文字首字母缩写）		—

基础用法

在头像中显示文字首字母缩写。

<template>
  <div class="demo-avatar">
    <px-avatar>AB</px-avatar>
    <px-avatar>JD</px-avatar>
    <px-avatar>Px</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

尺寸

使用 size 属性来设置头像大小。

<template>
  <div class="demo-avatar">
    <px-avatar size="large">LG</px-avatar>
    <px-avatar>DF</px-avatar>
    <px-avatar size="small">SM</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

形状

使用 shape 属性来切换圆形（默认）和方形。

<template>
  <div class="demo-avatar">
    <px-avatar>AB</px-avatar>
    <px-avatar shape="square">AB</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

边框

使用 :border="false" 来隐藏像素风格边框（默认显示）。

<template>
  <div class="demo-avatar">
    <px-avatar>AB</px-avatar>
    <px-avatar :border="false">AB</px-avatar>
    <px-avatar shape="square">AB</px-avatar>
    <px-avatar shape="square" :border="false">AB</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

状态指示器

使用 status 属性来显示状态指示器。设置为 'online' 显示在线（绿色），设置为 'offline' 显示离线（灰色），不设置则隐藏指示器。

<template>
  <div class="demo-avatar">
    <px-indicator type="success" :offset="[-4, 4]">
      <px-avatar>AB</px-avatar>
    </px-indicator>
    <px-indicator type="info" :offset="[-4, 4]">
      <px-avatar>JD</px-avatar>
    </px-indicator>
    <px-avatar>Px</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

自定义颜色

使用 color 属性来设置自定义十六进制背景颜色。

<template>
  <div class="demo-avatar">
    <px-avatar color="#8839ef">AB</px-avatar>
    <px-avatar color="#1e66f5">JD</px-avatar>
    <px-avatar color="#40a02b">Px</px-avatar>
    <px-avatar color="#fe640b" shape="square" border>SK</px-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>