Avatar 头像

介绍

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

安装

  1. import { createApp } from 'vue';
  2. import { Avatar } from '@nutui/nutui';
  4. const app = createApp();
  5. app.use(Avatar);

代码示例

基本用法

内置 smal / normal / large 三种尺寸规格

  1. <nut-avatar size="large" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
  2. ></nut-avatar>
  3. <nut-avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
  4. ></nut-avatar>
  5. <nut-avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
  6. ></nut-avatar>

修改形状类型

  1. <nut-avatar shape="square"></nut-avatar>
  2. <nut-avatar shape="round"></nut-avatar>

修改背景色

  1. <nut-avatar bg-color="#f0250f"></nut-avatar>

修改背景icon

  1. <nut-avatar icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>

设置头像的文本内容

  1. <nut-avatar icon>N</nut-avatar>

Prop

字段说明类型默认值
bg-color设置头像背景色String#eee
size设置头像的大小，提供三种：large/normal/small，支持直接输入数字Stringnormal
shape设置头像的形状，默认是圆形，可以设置为square方形Stringround
src设置头像的背景图片String‘’
icon设置头像的icon图标, 优先级低于src,类似Icon组件的name属性，支持名称和链接String‘’

Events

字段说明类型回调参数
on-error加载图片失败触发事件Functionevent

Avatar 头像 - 图1