Avatar头像

用来代表用户或事物,支持图片、图标或字符展示。

设计师专属

安装 Kitchen Sketch 插件 �,一键填充高逼格头像和文本.

代码演示

Avatar 头像 - 图1

基本

头像有三种尺寸,两种形状可选。

  1. <template>
  2. <div>
  3. <div>
  4. <a-avatar :size="64" icon="user" />
  5. <a-avatar size="large" icon="user" />
  6. <a-avatar icon="user" />
  7. <a-avatar size="small" icon="user" />
  8. </div>
  9. <br />
  10. <div>
  11. <a-avatar shape="square" :size="64" icon="user" />
  12. <a-avatar shape="square" size="large" icon="user" />
  13. <a-avatar shape="square" icon="user" />
  14. <a-avatar shape="square" size="small" icon="user" />
  15. </div>
  16. </div>
  17. </template>

Avatar 头像 - 图2

带徽标的头像

通常用于消息提示。

  1. <template>
  2. <div>
  3. <span style="margin-right:24px">
  4. <a-badge :count="1"><a-avatar shape="square" icon="user"/></a-badge>
  5. </span>
  6. <span>
  7. <a-badge dot><a-avatar shape="square" icon="user"/></a-badge>
  8. </span>
  9. </div>
  10. </template>

Avatar 头像 - 图3

类型

支持三种类型:图片、Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。

  1. <template>
  2. <div>
  3. <a-avatar icon="user" />
  4. <a-avatar>U</a-avatar>
  5. <a-avatar>USER</a-avatar>
  6. <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  7. <a-avatar style="color: #f56a00; backgroundColor: #fde3cf">U</a-avatar>
  8. <a-avatar style="backgroundColor:#87d068" icon="user" />
  9. </div>
  10. </template>

Avatar 头像 - 图4

自动调整字符大小

对于字符型的头像,当字符串较长时,字体大小可以根据头像宽度自动调整。

  1. <template>
  2. <div>
  3. <a-avatar shape="square" size="large" :style="{backgroundColor: color, verticalAlign: 'middle'}"
  4. >{{avatarValue}}</a-avatar
  5. >
  6. <a-button size="small" :style="{ marginLeft: 16, verticalAlign: 'middle' }" @click="changeValue"
  7. >改变</a-button
  8. >
  9. </div>
  10. </template>
  11. <script>
  12. const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
  13. const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
  14. export default {
  15. data() {
  16. return {
  17. avatarValue: UserList[0],
  18. color: colorList[0],
  19. };
  20. },
  21. methods: {
  22. changeValue() {
  23. const index = UserList.indexOf(this.avatarValue);
  24. this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
  25. this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];
  26. },
  27. },
  28. };
  29. </script>

API

参数说明类型默认值
icon设置头像的图标类型,参考 Icon 组件string-
shape指定头像的形状Enum{ 'circle', 'square' }circle
size设置头像的大小number | Enum{ 'large', 'small', 'default' }default
src图片类头像的资源地址string-
srcSet设置图片类头像响应式资源地址string-
alt图像无法显示时的替代文本string-
loadError图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为() => boolean-