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 头像组件的主要用法，可根据实际需求灵活调整参数和样式。