import{c as t,o as a,A as e}from"./vendor.80bf15c7.js";const n={class:"markdown-body"},o=e('

Avatar 头像

介绍

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

安装

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

代码示例

基本用法

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

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

修改形状类型

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

修改背景色

<nut-avatar bg-color="#f0250f"></nut-avatar>\n

修改背景icon

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

设置头像的文本内容

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

点击头像，触发事件

<nut-avatar @active-avatar="activeAvatar"></nut-avatar>\n

Prop

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

Events

字段	说明	类型	回调参数
active-avatar	点击头像触发事件	Function	event

',23),r={expose:[],setup:e=>(e,r)=>(a(),t("div",n,[o]))};export default r;