elementui头像
ElementUI 头像组件使用指南
基本用法
ElementUI 提供了 el-avatar 组件用于显示头像，支持图片、图标或文字。
<el-avatar src="https://example.com/avatar.png"></el-avatar>src 属性用于设置图片地址，如果未提供，则会显示默认占位符。
形状与尺寸
默认形状为圆形，可以通过 shape 属性设置为方形：
<el-avatar shape="square" src="https://example.com/avatar.png"></el-avatar>尺寸可通过 size 属性调整，支持数值或预设值（large、medium、small）：
<el-avatar size="small" src="https://example.com/avatar.png"></el-avatar>
<el-avatar :size="50" src="https://example.com/avatar.png"></el-avatar>文字头像
如果未提供 src，可以通过插槽显示文字：
<el-avatar> 用户 </el-avatar>图标头像
使用 icon 属性显示 ElementUI 图标：
<el-avatar icon="el-icon-user-solid"></el-avatar>适应图片比例
通过 fit 属性控制图片如何适应容器，可选值包括 fill、contain、cover、none、scale-down：
<el-avatar fit="cover" src="https://example.com/avatar.png"></el-avatar>事件绑定
el-avatar 支持 error 事件，可用于处理图片加载失败的情况：
<el-avatar @error="handleError" src="https://example.com/avatar.png"></el-avatar>methods: {
handleError() {
console.log('图片加载失败');
}
}组合头像
多个头像可以通过 CSS 或布局组件组合显示，例如：
<div style="display: flex;">
<el-avatar size="small" src="https://example.com/avatar1.png"></el-avatar>
<el-avatar size="small" src="https://example.com/avatar2.png"></el-avatar>
</div>自定义样式
通过 style 或 class 属性可以进一步调整样式：
<el-avatar style="background-color: #409EFF;"> 自定义 </el-avatar>以上是 ElementUI 头像组件的主要用法，可根据实际需求灵活调整参数和样式。
