Avatar 头像

概述

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

代码示例

Avatar 头像 - 图1

基础用法

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

4.0.0 版本开始,size 可以设置为数值。

  1. <template>
  2. <div>
  3. <div class="demo-avatar">
  4. <Avatar icon="ios-person" size="large" />
  5. <Avatar icon="ios-person" />
  6. <Avatar icon="ios-person" size="small" />
  7. </div>
  8. <div class="demo-avatar">
  9. <Avatar shape="square" icon="ios-person" size="large" />
  10. <Avatar shape="square" icon="ios-person" />
  11. <Avatar shape="square" icon="ios-person" size="small" />
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. }
  18. </script>

Avatar 头像 - 图2

类型

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

  1. <template>
  2. <div class="demo-avatar">
  3. <Avatar icon="ios-person" />
  4. <Avatar>U</Avatar>
  5. <Avatar>USER</Avatar>
  6. <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
  7. <Avatar style="color: #f56a00;background-color: #fde3cf">U</Avatar>
  8. <Avatar style="background-color: #87d068" icon="ios-person" />
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. }
  14. </script>

Avatar 头像 - 图3

带徽标的头像

通常用于消息提示。

  1. <template>
  2. <div class="demo-avatar-badge">
  3. <Badge :count="1">
  4. <Avatar shape="square" icon="ios-person" />
  5. </Badge>
  6. <Badge dot>
  7. <Avatar shape="square" icon="ios-person" />
  8. </Badge>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. }
  14. </script>

Avatar 头像 - 图4

自动调整字符大小

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

  1. <template>
  2. <div class="demo-avatar">
  3. <Avatar :style="{background: color}">{{ user }}</Avatar>
  4. <Button size="small" @click="handleChange">Change</Button>
  5. </div>
  6. </template>
  7. <script>
  8. const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
  9. const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
  10. export default {
  11. data () {
  12. return {
  13. user: UserList[0],
  14. color: ColorList[0]
  15. }
  16. },
  17. methods: {
  18. handleChange () {
  19. const index = UserList.indexOf(this.user);
  20. this.user = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
  21. this.color = index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0];
  22. }
  23. }
  24. }
  25. </script>

API

Avatar props

属性 说明 类型 默认值
shape 指定头像的形状,可选值为 circle、square String circle
size 设置头像的大小,可选值为 large、small、default,4.0.0 版本开始支持设置具体数值 String | Number default
src 图片类头像的资源地址 String -
icon 设置头像的图标类型,参考 Icon 组件 String -
custom-icon 自定义图标 String -

Avatar events

事件名 说明 返回值
on-error 3.3.0 在设置 src 且图片加载不成功时触发 event