【愚公系列】《循序渐进Vue.js 3.x前端开发实践》045-Element Plus基本组件示例

愚公搬代码

发布于 2025-06-02 17:54:24

44800

代码可运行

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在前端开发中，组件化的设计理念已成为提升开发效率和用户体验的关键。Element Plus 作为一款专为 Vue 3 设计的 UI 组件库，以其简洁优雅的设计和丰富多样的组件，帮助开发者轻松构建美观且功能强大的用户界面。

本篇文章旨在通过实际示例，深入探讨 Element Plus 中的各类组件，帮助你更好地理解和应用这些强大的工具。我们将逐步展示常用组件的使用方法，包括按钮、输入框、表单、表格、对话框、通知等，结合具体的代码示例和应用场景，让你能够快速上手并在项目中灵活运用。

🚀一、Element Plus组件示例

🔎1.按钮组件

<script setup>
import { defineProps } from 'vue'

defineProps({
  msg: String,
})

// const count = ref(0)
</script>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-empty description="空空如也~~~"></el-empty>
  </div>
  <div>
    <el-button>默认按钮</el-button>
    <el-button size="large">大等按钮</el-button>
    <el-button size="small">小型按钮</el-button>
  </div>

  <div>
    <el-button type="primary">常规按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>

  <div>
    <el-button type="primary" :plain="true">描边</el-button>
    <el-button type="primary" :round="true">圆角</el-button>
    <el-button type="primary" :circle="true">圆形</el-button>
    <el-button type="primary" :disable="true">禁用</el-button>
    <el-button type="primary" :loading="true">加载</el-button>
  </div>

  <div>
    <el-button type="primary" icon="Share"></el-button>
    <el-button type="primary" icon="Delete"></el-button>
    <el-button type="primary" icon="Search">图标在前</el-button>
    <el-button type="primary">图标在后<el-icon class="el-icon--right"><Upload /></el-icon></el-button>
  </div>

  <div>
    <el-tag>普通标签</el-tag>
    <el-tag :hit="true">描边标签</el-tag>
    <el-tag color="purple">紫色背景标签</el-tag>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
div {
  margin-top: 30px;
}
</style>

🦋1.1 `<script setup>` 部分

<script setup>
import { defineProps } from 'vue'

defineProps({
  msg: String,
})

// const count = ref(0)
</script>

解释：

<script setup>：这是 Vue 3 的新语法糖，使得编写 Vue 组件更加简洁。你不需要使用 export default，并且可以直接在 <script setup> 中写逻辑代码。
import { defineProps } from 'vue'：从 Vue 中导入 defineProps 函数。defineProps 用于声明组件的 props，这是 Vue 3 中的 Composition API。
defineProps({ msg: String })：声明组件的 msg 属性，类型为 String。父组件传递给子组件的数据就会通过这个属性（msg）传递给子组件。
注释掉的 const count = ref(0)：这是一个响应式数据的声明，ref(0) 创建了一个响应式的变量 count，初始值为 0。但是这里被注释掉了，如果你取消注释并在模板中使用 count，它会变成一个可响应的计数器。

🦋1.2 模板部分

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-empty description="空空如也~~~"></el-empty>
  </div>

  <div>
    <el-button>默认按钮</el-button>
    <el-button size="large">大等按钮</el-button>
    <el-button size="small">小型按钮</el-button>
  </div>

  <div>
    <el-button type="primary">常规按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>

  <div>
    <el-button type="primary" :plain="true">描边</el-button>
    <el-button type="primary" :round="true">圆角</el-button>
    <el-button type="primary" :circle="true">圆形</el-button>
    <el-button type="primary" :disable="true">禁用</el-button>
    <el-button type="primary" :loading="true">加载</el-button>
  </div>

  <div>
    <el-button type="primary" icon="Share"></el-button>
    <el-button type="primary" icon="Delete"></el-button>
    <el-button type="primary" icon="Search">图标在前</el-button>
    <el-button type="primary">图标在后<el-icon class="el-icon--right"><Upload /></el-icon></el-button>
  </div>

  <div>
    <el-tag>普通标签</el-tag>
    <el-tag :hit="true">描边标签</el-tag>
    <el-tag color="purple">紫色背景标签</el-tag>
  </div>
</template>

解释：

<div class="hello">：

<h1>{{ msg }}</h1>：这里展示了从父组件传递过来的 msg 属性值。{{ msg }} 是 Vue 的模板语法，它会将 msg 的值渲染到页面中。
<el-empty description="空空如也~~~"></el-empty>：这是 Element Plus 提供的 el-empty 组件，通常用于展示空状态。在数据为空时，可以使用该组件来显示占位符内容，这里描述文字为“空空如也~~~”。

按钮部分：通过 <el-button> 组件展示了不同类型和样式的按钮。

默认按钮、大小设置：

<el-button>默认按钮</el-button>
<el-button size="large">大等按钮</el-button>
<el-button size="small">小型按钮</el-button>

这三种按钮展示了不同的按钮尺寸，默认尺寸、large（大）和 small（小）。

按钮类型：

<el-button type="primary">常规按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>

这些按钮展示了不同的类型，primary、success、info、warning 和 danger，每种类型对应不同的样式和颜色。

更多按钮特性：

<el-button type="primary" :plain="true">描边</el-button>
<el-button type="primary" :round="true">圆角</el-button>
<el-button type="primary" :circle="true">圆形</el-button>
<el-button type="primary" :disable="true">禁用</el-button>
<el-button type="primary" :loading="true">加载</el-button>

plain：如果设置为 true，按钮会变成只有边框的样式，类似于描边按钮。
round：如果设置为 true，按钮会变成圆角按钮。
circle：如果设置为 true，按钮会变成完全圆形。
disable：如果设置为 true，按钮将禁用，不能点击。
loading：如果设置为 true，按钮会显示加载中状态，通常显示一个转动的图标。

按钮带图标：

<el-button type="primary" icon="Share"></el-button>
<el-button type="primary" icon="Delete"></el-button>
<el-button type="primary" icon="Search">图标在前</el-button>
<el-button type="primary">图标在后<el-icon class="el-icon--right"><Upload /></el-icon></el-button>

icon="Share"：这是一个带有“Share”图标的按钮。
图标在前 和 图标在后：展示了按钮文本和图标的位置。<el-icon class="el-icon--right"><Upload /></el-icon> 展示了图标在按钮文本后面。

标签部分：

<el-tag>普通标签</el-tag>
<el-tag :hit="true">描边标签</el-tag>
<el-tag color="purple">紫色背景标签</el-tag>

<el-tag>：这是 Element Plus 提供的标签组件。展示了普通标签、描边标签（通过 :hit="true" 设置）、以及带有紫色背景的标签（通过 color="purple" 设置）。

🦋1.3 样式部分

<style scoped>
.read-the-docs {
  color: #888;
}

div {
  margin-top: 30px;
}
</style>

解释：

<style scoped>：scoped 确保样式只作用于当前组件，而不会影响全局。
样式规则：
- .read-the-docs { color: #888; }：这个类的文字颜色为 #888（灰色），但是这个类并没有在模板中使用。
- div { margin-top: 30px; }：所有的 div 元素都设置了 margin-top: 30px;，这会让每个 div 元素之间有 30px 的间隔。

🔎2.标签组件

<script setup>
import { ref } from 'vue'
// 默认展示的标签
const tags = ref(["男装","女装","帽子","鞋子"]); 
 // 控制输入框是否展示
const show = ref(false);
// 与输入框进行数据绑定
const inputValue = ref(""); 
// 删除某个标签的方法，将其从数据源数组中移除
function closeTag(index) { 
    tags.value.splice(index, 1);
}
// 显示输入框，新建标签时将输入框展示出来
function showInput() {
    show.value = true
}
// 确认输入，当输入框失去焦点时调用，向数据源列表中新增数据
function handleInputConfirm(){
    if (inputValue.value) {
        tags.value.push(inputValue.value);
    }
    show.value = false;
    inputValue.value = '';
}

</script>

<template>
    <div>  
      <template v-for="(tag,index) in tags" :key="tag">
        <el-tag :closable="true" @close="closeTag(index)">{{tag}}</el-tag>
        <span style="padding:10px"></span>
      </template>
      <el-input style="width: 90px"
                v-if="show"
                v-model="inputValue"
                @keyup.enter="handleInputConfirm"
                @blur="handleInputConfirm"
                size="small">
      </el-input>
      <el-button size="small" v-else @click="showInput">新建标签 +</el-button>
    </div>
    <div>
        <el-check-tag :checked="true">足球</el-check-tag>
        <el-check-tag :checked="false">篮球</el-check-tag>
    </div>
</template>

这段 Vue 代码展示了如何使用 Vue 3 和 Element Plus 实现标签管理功能，包括展示、删除、添加标签和自定义输入框等功能。下面是详细的解释：

🦋2.1 `<script setup>` 部分

<script setup>
import { ref } from 'vue'

// 默认展示的标签
const tags = ref(["男装", "女装", "帽子", "鞋子"]);

// 控制输入框是否展示
const show = ref(false);

// 与输入框进行数据绑定
const inputValue = ref("");

// 删除某个标签的方法，将其从数据源数组中移除
function closeTag(index) {
  tags.value.splice(index, 1);
}

// 显示输入框，新建标签时将输入框展示出来
function showInput() {
  show.value = true;
}

// 确认输入，当输入框失去焦点时调用，向数据源列表中新增数据
function handleInputConfirm() {
  if (inputValue.value) {
    tags.value.push(inputValue.value);
  }
  show.value = false;
  inputValue.value = '';
}
</script>

解释：

import { ref } from 'vue'：从 Vue 中引入 ref，用于定义响应式数据。
tags：这是一个响应式变量，存储当前展示的标签列表，初始值为 ["男装", "女装", "帽子", "鞋子"]。
show：这是一个布尔值，控制输入框是否展示。初始值为 false，表示输入框默认隐藏。
inputValue：这个响应式变量用于绑定输入框的值，初始值为空字符串。
closeTag(index)：这个方法用于删除标签。当点击标签上的关闭按钮时，会调用此方法，并将标签从 tags 数组中移除。
showInput()：当点击“新建标签”按钮时，调用此方法将 show 设置为 true，从而显示输入框。
handleInputConfirm()：当输入框失去焦点或者按下回车键时，调用此方法。如果 inputValue 有值，就将它添加到 tags 数组中，并且隐藏输入框（show = false），同时清空输入框的内容。

🦋2.2 模板部分

<template>
  <div>
    <template v-for="(tag,index) in tags" :key="tag">
      <el-tag :closable="true" @close="closeTag(index)">{{tag}}</el-tag>
      <span style="padding:10px"></span>
    </template>
    
    <el-input 
      style="width: 90px" 
      v-if="show" 
      v-model="inputValue" 
      @keyup.enter="handleInputConfirm" 
      @blur="handleInputConfirm" 
      size="small">
    </el-input>
    
    <el-button size="small" v-else @click="showInput">新建标签 +</el-button>
  </div>
  
  <div>
    <el-check-tag :checked="true">足球</el-check-tag>
    <el-check-tag :checked="false">篮球</el-check-tag>
  </div>
</template>

解释：

标签列表展示：

<template v-for="(tag,index) in tags" :key="tag">
  <el-tag :closable="true" @close="closeTag(index)">{{tag}}</el-tag>
  <span style="padding:10px"></span>
</template>

v-for="(tag, index) in tags"：遍历 tags 数组，tag 是当前标签的内容，index 是标签的索引。
<el-tag :closable="true" @close="closeTag(index)">：这是 Element Plus 提供的标签组件，closable 属性设置为 true，使得标签右侧出现关闭按钮，点击时会调用 closeTag(index) 方法，从 tags 数组中移除该标签。

输入框显示与隐藏：

<el-input 
  style="width: 90px" 
  v-if="show" 
  v-model="inputValue" 
  @keyup.enter="handleInputConfirm" 
  @blur="handleInputConfirm" 
  size="small">
</el-input>

v-if="show"：当 show 为 true 时，输入框才会显示。
v-model="inputValue"：实现双向绑定，将输入框的内容与 inputValue 进行绑定。
@keyup.enter="handleInputConfirm" 和 @blur="handleInputConfirm"：监听输入框的回车键（enter）事件和失去焦点（blur）事件，当这两种事件发生时都会调用 handleInputConfirm 方法，确认输入的标签并将其添加到 tags 数组中。

新建标签按钮：

<el-button size="small" v-else @click="showInput">新建标签 +</el-button>

v-else：当 show 为 false 时显示这个按钮。点击时会调用 showInput() 方法，将输入框展示出来，方便用户输入新的标签。

自定义复选框标签：

<el-check-tag :checked="true">足球</el-check-tag>
<el-check-tag :checked="false">篮球</el-check-tag>

<el-check-tag> 是 Element Plus 提供的一个复选框标签组件。
:checked="true" 和 :checked="false"：用来设置标签是否被选中。

🦋2.3 功能总结

标签显示与删除：
- 页面初始显示四个默认标签（男装, 女装, 帽子, 鞋子）。
- 每个标签右侧有一个关闭按钮，点击后会调用 closeTag(index) 方法将标签从 tags 数组中移除。
新建标签：
- 当点击“新建标签 +”按钮时，输入框显示出来，用户可以输入新的标签。
- 用户可以按回车键或失去焦点来确认输入。新标签将被添加到 tags 数组中，并且输入框会隐藏。
复选框标签：
- 页面下方展示了两个复选框标签（足球 和 篮球），它们的选中状态由 :checked="true" 和 :checked="false" 控制。

🦋2.4 交互流程

页面加载时，默认显示四个标签（男装, 女装, 帽子, 鞋子）。
用户点击“新建标签 +”按钮，输入框显示，用户输入标签并按回车或失去焦点后，标签会被添加到 tags 数组中。
标签旁边的关闭按钮可以删除标签。
页面下方展示了两个复选框标签（足球 和 篮球）。

🔎3.空态图与加载占位图组件

<script setup>
import { ref, onMounted } from 'vue'
const msg = ref("")
const loading = ref(true)
function getData() {
    msg.value = "这里是请求到的数据"
    loading.value = false
}
onMounted(()=>{
    setTimeout(() => {
        getData()
    }, 3000);
})
</script>

<template>
    <el-empty description="设置空态图的描述文案" :image-size="400"></el-empty>
    <el-empty>
        <!-- image具名插槽用来替换默认的图片部分 -->
        <template v-slot:image>
            <div>这里是自定义图片位置</div>
        </template>
        <!-- description具名插槽用来替换默认的描述部分 -->
        <template v-slot:description>
            <h3>自定义描述内容</h3>
        </template>
        <!-- 默认的插槽用来在空态图的尾部追加内容 -->
        <el-button>看看其他内容</el-button>
    </el-empty>
    <el-skeleton :rows="10" :animated="true"></el-skeleton>
    <el-skeleton :animated="true">
        <template #template>
            <!-- 定义标题骨架 -->
            <el-skeleton-item variant="h1" style="width: 100px; height: 30px; padding:0"/>
            <!-- 定义图片骨架 -->
            <el-skeleton-item variant="image" style="width: 240px; height: 240px; padding:0" />
            <!-- 定义段落骨架 -->
            <el-skeleton-item variant="p" style="width: 30%; padding:0; margin-top:20px"/>
            <el-skeleton-item variant="p" style="width: 90%; padding:0"/>
            <el-skeleton-item variant="p" style="width: 90%; padding:0"/>
        </template>
    </el-skeleton>
    <el-skeleton :rows="1" :animated="true" :loading="loading">
        <h1>这里是真实的页面元素</h1>
        <p>{{msg}}</p>
    </el-skeleton>
</template>

🦋3.1 `<script setup>` 部分

<script setup>
import { ref, onMounted } from 'vue'

const msg = ref("")  // 用于存储请求到的数据
const loading = ref(true)  // 控制数据是否加载完成

// 模拟请求数据的方法
function getData() {
    msg.value = "这里是请求到的数据"  // 模拟请求到的数据
    loading.value = false  // 设置数据加载完成
}

// 在组件挂载完成后模拟数据请求
onMounted(() => {
    setTimeout(() => {
        getData()  // 模拟 3 秒钟后获取数据
    }, 3000);
})
</script>

解释：

import { ref, onMounted } from 'vue'：从 Vue 3 引入 ref（用于定义响应式变量）和 onMounted（用于组件挂载后执行逻辑）函数。
msg：一个响应式变量，用来存储从模拟 API 请求获取的数据，初始值为空字符串。
loading：一个布尔类型的响应式变量，用来标识数据是否在加载中，初始值为 true（表示加载中）。
getData()：模拟一个数据请求函数，在实际开发中，你会使用 axios 或其他工具发起 HTTP 请求。这里模拟的是 3 秒后获取数据，并更新 msg 和 loading 的状态。
onMounted()：这是 Vue 3 的生命周期钩子，表示组件挂载完成后会执行的逻辑。在这里，我们使用 setTimeout 来模拟 3 秒后获取数据的过程。

🦋3.2 模板部分

<template>
    <!-- 空态图展示 -->
    <el-empty description="设置空态图的描述文案" :image-size="400"></el-empty>

    <!-- 空态图自定义插槽 -->
    <el-empty>
        <!-- 自定义图片部分 -->
        <template v-slot:image>
            <div>这里是自定义图片位置</div>
        </template>
        <!-- 自定义描述部分 -->
        <template v-slot:description>
            <h3>自定义描述内容</h3>
        </template>
        <!-- 默认插槽 -->
        <el-button>看看其他内容</el-button>
    </el-empty>

    <!-- 骨架屏展示 -->
    <el-skeleton :rows="10" :animated="true"></el-skeleton>

    <!-- 定义骨架屏模板 -->
    <el-skeleton :animated="true">
        <template #template>
            <!-- 定义标题骨架 -->
            <el-skeleton-item variant="h1" style="width: 100px; height: 30px; padding:0"/>
            <!-- 定义图片骨架 -->
            <el-skeleton-item variant="image" style="width: 240px; height: 240px; padding:0" />
            <!-- 定义段落骨架 -->
            <el-skeleton-item variant="p" style="width: 30%; padding:0; margin-top:20px"/>
            <el-skeleton-item variant="p" style="width: 90%; padding:0"/>
            <el-skeleton-item variant="p" style="width: 90%; padding:0"/>
        </template>
    </el-skeleton>

    <!-- 真实数据加载完成后展示 -->
    <el-skeleton :rows="1" :animated="true" :loading="loading">
        <h1>这里是真实的页面元素</h1>
        <p>{{msg}}</p>
    </el-skeleton>
</template>

解释：

<el-empty> 组件：
- <el-empty description="设置空态图的描述文案" :image-size="400"></el-empty>：这是 Element Plus 提供的空态图组件，用来展示没有数据时的占位效果。通过 description 可以设置描述文本，image-size 设置图片大小。
- 自定义插槽：
  - v-slot:image：通过具名插槽可以自定义空态图的图片部分。
  - v-slot:description：通过具名插槽可以自定义空态图的描述部分。
  - <el-button>：插入一个按钮，在空态图的尾部显示，通常用于引导用户执行某些操作（比如查看其他内容）。
骨架屏：
- <el-skeleton :rows="10" :animated="true"></el-skeleton>：这是一个骨架屏组件，通常用于数据加载时的占位效果。rows="10" 表示显示 10 行骨架屏，animated="true" 表示启用动画效果。
- 自定义骨架屏内容：
  - <el-skeleton-item>：用来定义不同类型的骨架屏元素。这里定义了：
    - variant="h1"：表示一个标题的骨架，宽度为 100px，高度为 30px。
    - variant="image"：表示一个图片的骨架，宽度 240px，高度 240px。
    - variant="p"：表示段落的骨架，宽度分别为 30%、90% 和 90%。
数据加载完成后显示内容：
- <el-skeleton :rows="1" :animated="true" :loading="loading">：这个骨架屏组件使用了 loading 变量来控制显示或隐藏。只有在 loading 为 true 时，骨架屏才会显示。
- 真实数据展示：
  - 当 loading 为 false（即数据加载完成后），骨架屏会隐藏，实际内容显示出来。显示的内容包括标题 <h1> 和通过数据绑定显示的 msg。

🦋3.3 交互流程

页面加载时，loading 为 true，显示的是一个带有 10 行骨架的占位效果，并且同时展示了空态图。
3 秒后，通过 setTimeout 模拟请求数据的过程，调用 getData 函数更新 msg 和 loading 状态。
当数据加载完成（loading 为 false）后，骨架屏隐藏，显示真实的标题和请求到的数据。
如果没有数据，可以使用空态图来向用户展示一个“空”状态，并提供相应的操作（如按钮“看看其他内容”）。

🔎4.图片与头像组件

<script setup>
</script>

<template>
<el-image style="width:500px" src="http://huishao.cc/img/head-img.png"></el-image>
<el-image style="width:500px" src="http://huishao.cc/img/head-img.png">
  <template #placeholder>
    <h1>加载中...</h1>
  </template>
  <template #error>
    <h1>加载失败</h1>
  </template>
</el-image>
<div>
<!-- 使用文本类型的头像 -->
<el-avatar style="margin:20px">用户</el-avatar>
<!-- 使用图标类型的头像 -->
<el-avatar style="margin:20px"><el-icon><User/></el-icon></el-avatar>
<!-- 使用图片类型的头像 -->
<el-avatar style="margin:20px" :size="100" src="http://huishao.cc/img/avatar.jpg"></el-avatar>
<el-avatar style="margin:20px" src="http://huishao.cc/img/avatar.jpg"></el-avatar>
<el-avatar style="margin:20px" shape="square"  src="http://huishao.cc/img/avatar.jpg"></el-avatar>
</div>

</template>

这段 Vue 代码展示了如何使用 Element Plus 组件库的 el-image 和 el-avatar 组件来处理图片和头像的显示，尤其是针对图片的加载状态和错误提示。下面是对这段代码的详细解析。

🦋4.1 `el-image` 组件

el-image 用于显示图片，并提供了额外的功能，比如加载中的占位符和加载失败的错误提示。

<el-image style="width:500px" src="http://huishao.cc/img/head-img.png"></el-image>

style="width:500px"：这段代码为图片指定了一个固定的宽度（500px）。
src="http://huishao.cc/img/head-img.png"：这是图片的来源，指定了图片的 URL。
这个 el-image 组件会自动处理图片的加载状态、错误等情况，但没有占位符或错误提示，因此如果图片加载失败，它不会显示任何提示。

带有占位符和错误提示的 el-image

<el-image style="width:500px" src="http://huishao.cc/img/head-img.png">
  <template #placeholder>
    <h1>加载中...</h1>
  </template>
  <template #error>
    <h1>加载失败</h1>
  </template>
</el-image>

<template #placeholder>：定义了当图片加载过程中显示的内容。在图片还在加载时，页面会显示 <h1>加载中...</h1>。
<template #error>：定义了当图片加载失败时显示的内容。如果图片加载失败，页面会显示 <h1>加载失败</h1>。

el-image 提供了丰富的插槽支持，允许开发者根据不同的状态（加载中、加载失败等）自定义显示内容。

🦋4.2 `el-avatar` 组件

el-avatar 组件用于显示头像，它支持三种类型：文本头像、图标头像和图片头像。每种头像可以自定义大小、形状等。

文本类型的头像

<el-avatar style="margin:20px">用户</el-avatar>

这里的 el-avatar 使用文本内容“用户”作为头像显示，头像的大小和形状是默认的（圆形）。style="margin:20px" 用于设置与其他元素的间距。

图标类型的头像

<el-avatar style="margin:20px"><el-icon><User/></el-icon></el-avatar>

这段代码使用了 el-icon 组件来渲染一个图标（<User /> 图标）。el-avatar 会自动将图标作为头像显示。
style="margin:20px" 用来控制头像与其他元素的间距。

图片类型的头像

<el-avatar style="margin:20px" :size="100" src="http://huishao.cc/img/avatar.jpg"></el-avatar>

这个 el-avatar 使用一张图片（http://huishao.cc/img/avatar.jpg）作为头像。:size="100" 用来设置头像的大小为 100px。style="margin:20px" 用来设置头像的外边距。

其他类型的图片头像

<el-avatar style="margin:20px" src="http://huishao.cc/img/avatar.jpg"></el-avatar>
<el-avatar style="margin:20px" shape="square"  src="http://huishao.cc/img/avatar.jpg"></el-avatar>

第一行显示的是默认圆形头像，使用了相同的图片。
第二行使用了 shape="square" 属性来改变头像的形状为方形。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-05-16，如有侵权请联系 cloudcommunity@tencent.com 删除

数据

button

element

实践

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！