【区分vue2和vue3下的element UI Avatar 头像组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 和 Vue 3 中，Element UI 和 Element Plus 提供了 Avatar 头像组件，用于显示用户的头像或图标。然而，需要注意的是，在 Vue 2 中通常使用 Element UI，而在 Vue 3 中则使用 Element Plus。这两个库在 Avatar 组件的实现上可能会有一些细微的差别，但基本概念和用法是相似的。

Vue 2 + Element UI Avatar 头像组件

在 Vue 2 中，Element UI 的 Avatar 组件主要用于展示用户头像或图标，它提供了丰富的属性来自定义显示。

属性（Props）

• size：设置头像的大小。
• src：设置头像的图片地址。
• shape：设置头像的形状，可选值为 square 或 circle。
• icon：当没有设置 src 时，可以设置一个 Element UI 的图标类名来显示图标。
• class-name：自定义类名。

事件（Events）

Element UI 的 Avatar 组件在 Vue 2 中并没有定义特定的事件。

方法（Methods）

Avatar 组件在 Vue 2 的 Element UI 中没有直接暴露任何方法供外部调用。

示例

<template>
  <el-avatar size="50" src="https://example.com/avatar.jpg"></el-avatar>
  <el-avatar size="40" icon="el-icon-user"></el-avatar>
</template>

<script>
export default {
  // ...
};
</script>

Vue 3 + Element Plus Avatar 头像组件

在 Vue 3 中，Element Plus 的 Avatar 组件与 Vue 2 中的 Element UI 类似，但可能增加了一些新的功能或属性。

属性（Props）

• size：设置头像的大小，可以是数字或字符串（如 'large'、'medium'、'small'，具体取决于 Element Plus 的版本和配置）。
• src：设置头像的图片地址。
• shape：设置头像的形状，可选值为 'circle'、'square' 或其他自定义形状（取决于 Element Plus 的版本和配置）。
• icon：当没有设置 src 时，可以使用 Element Plus 的图标组件或图标类名来显示图标。
• fit：控制图片如何适应容器，例如 'fill'、'contain'、'cover' 等（具体取决于 Element Plus 的版本和浏览器的支持）。

事件（Events）

Element Plus 的 Avatar 组件在 Vue 3 中同样没有定义特定的事件。

方法（Methods）

Avatar 组件在 Vue 3 的 Element Plus 中也没有直接暴露任何方法供外部调用。

示例

<template>
  <el-avatar size="50" src="https://example.com/avatar.jpg"></el-avatar>
  <el-avatar size="40" icon="el-icon-user-solid"></el-avatar>
  <!-- 注意：Element Plus 中可能需要使用 Element Plus 的图标组件或更新后的图标类名 -->
</template>

<script setup>
// 在 Vue 3 中使用 script setup 语法
// ...
</script>

请注意，Element Plus 的图标类名可能与 Element UI 有所不同，因此在 Vue 3 中使用时，请确保使用 Element Plus 提供的图标类名或图标组件。此外，size 和 shape 属性的具体值和用法可能随着 Element Plus 版本的更新而发生变化，因此建议查阅最新的官方文档。

在 Vue 3 和 Element Plus 中，你可能还需要安装并引入 Element Plus 及其图标库（如通过 npm 安装 @element-plus/icons-vue），以便在项目中使用图标。