import{e as s,o as a,G as t}from"./vendor.f7062dc0.js";const n={class:"markdown-body"},l=[t('

Avatar 头像

介绍

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

安装

import { createApp } from 'vue';\n// vue\nimport { Avatar } from '@nutui/nutui';\n// taro\nimport { Avatar } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Avatar);\n

代码示例

基本用法

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

<nut-avatar size="large" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"\n></nut-avatar>\n<nut-avatar size="normal" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"\n></nut-avatar>\n<nut-avatar size="small" icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"\n></nut-avatar>  \n

修改形状类型

<nut-avatar icon="my" shape="square"></nut-avatar>\n<nut-avatar icon="my" shape="round"></nut-avatar>\n

修改背景色

<nut-avatar icon="my" bg-color="#FA2C19" />\n

修改背景icon

<nut-avatar icon="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png" />\n

设置头像的文本内容

<nut-avatar>N</nut-avatar>\n

Prop

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

Events

字段说明类型回调参数
active-avatarror点击触发事件Functionevent
',21)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};