Element Plus 导航与反馈组件完全指南（15个核心组件）

摘要：本文详细介绍 Element Plus 组件库中的 15 个导航与反馈组件，包含 Breadcrumb、Menu、Dialog、Drawer 等高频使用组件。每个组件提供完整代码示例、核心 API 表格、实战场景及常见问题解答，帮助开发者掌握导航设计与用户反馈最佳实践。

关键词：Vue3、Element Plus、导航菜单、对话框、消息提示、面包屑、用户反馈、前端开发

适合人群：Vue3 中高级开发者、需要实现导航与反馈功能的开发者、前端工程师

阅读时间：约 30 分钟

版本信息：Element Plus 2.x | Vue 3.x | TypeScript

文章目录

[1. Breadcrumb 面包屑](#1. Breadcrumb 面包屑)
- [1.1 组件简介](#1.1 组件简介)
- [1.2 基础用法](#1.2 基础用法)
- [1.3 常用场景](#1.3 常用场景)
- [1.3.1 带图标的面包屑](#1.3.1 带图标的面包屑)
- [1.3.2 自定义分隔符](#1.3.2 自定义分隔符)
- [1.4 核心 API](#1.4 核心 API)
- [Breadcrumb 属性](#Breadcrumb 属性)
- [BreadcrumbItem 属性](#BreadcrumbItem 属性)
- [1.5 注意事项](#1.5 注意事项)
[2. Menu 导航菜单](#2. Menu 导航菜单)
- [2.1 组件简介](#2.1 组件简介)
- [2.2 基础用法](#2.2 基础用法)
- [2.3 常用场景](#2.3 常用场景)
- [2.3.1 带子菜单的导航](#2.3.1 带子菜单的导航)
- [2.3.2 水平导航菜单](#2.3.2 水平导航菜单)
- [2.4 核心 API](#2.4 核心 API)
- [2.5 注意事项](#2.5 注意事项)
[3. Tabs 标签页](#3. Tabs 标签页)
- [3.1 组件简介](#3.1 组件简介)
- [3.2 基础用法](#3.2 基础用法)
- [3.3 常用场景](#3.3 常用场景)
- [3.3.1 卡片风格标签页](#3.3.1 卡片风格标签页)
- [3.3.2 动态增删标签页](#3.3.2 动态增删标签页)
- [3.4 核心 API](#3.4 核心 API)
- [3.5 注意事项](#3.5 注意事项)
[4. Steps 步骤条](#4. Steps 步骤条)
- [4.1 组件简介](#4.1 组件简介)
- [4.2 基础用法](#4.2 基础用法)
- [4.3 常用场景](#4.3 常用场景)
- [4.3.1 垂直步骤条](#4.3.1 垂直步骤条)
- [4.3.2 简单步骤条](#4.3.2 简单步骤条)
- [4.4 核心 API](#4.4 核心 API)
- [4.5 注意事项](#4.5 注意事项)
[5. PageHeader 页头](#5. PageHeader 页头)
- [5.1 组件简介](#5.1 组件简介)
- [5.2 基础用法](#5.2 基础用法)
- [5.3 常用场景](#5.3 常用场景)
- [5.3.1 自定义页头内容](#5.3.1 自定义页头内容)
- [5.4 核心 API](#5.4 核心 API)
- [5.5 注意事项](#5.5 注意事项)
[6. Dropdown 下拉菜单](#6. Dropdown 下拉菜单)
- [6.1 组件简介](#6.1 组件简介)
- [6.2 基础用法](#6.2 基础用法)
- [6.3 常用场景](#6.3 常用场景)
- [6.3.1 触发方式](#6.3.1 触发方式)
- [6.4 核心 API](#6.4 核心 API)
- [6.5 注意事项](#6.5 注意事项)
[7. Dialog 对话框](#7. Dialog 对话框)
- [7.1 组件简介](#7.1 组件简介)
- [7.2 基础用法](#7.2 基础用法)
- [7.3 常用场景](#7.3 常用场景)
- [7.3.1 自定义头部和底部](#7.3.1 自定义头部和底部)
- [7.3.2 嵌套对话框](#7.3.2 嵌套对话框)
- [7.4 核心 API](#7.4 核心 API)
- [7.5 注意事项](#7.5 注意事项)
[8. Drawer 抽屉](#8. Drawer 抽屉)
- [8.1 组件简介](#8.1 组件简介)
- [8.2 基础用法](#8.2 基础用法)
- [8.3 常用场景](#8.3 常用场景)
- [8.3.1 不同方向的抽屉](#8.3.1 不同方向的抽屉)
- [8.4 核心 API](#8.4 核心 API)
- [8.5 注意事项](#8.5 注意事项)
[9. Popover 气泡卡片](#9. Popover 气泡卡片)
- [9.1 组件简介](#9.1 组件简介)
- [9.2 基础用法](#9.2 基础用法)
- [9.3 核心 API](#9.3 核心 API)
- [9.4 注意事项](#9.4 注意事项)
[10. Popconfirm 气泡确认框](#10. Popconfirm 气泡确认框)
- [10.1 组件简介](#10.1 组件简介)
- [10.2 基础用法](#10.2 基础用法)
- [10.3 核心 API](#10.3 核心 API)
- [10.4 注意事项](#10.4 注意事项)
[11. Tooltip 文字提示](#11. Tooltip 文字提示)
- [11.1 组件简介](#11.1 组件简介)
- [11.2 基础用法](#11.2 基础用法)
- [11.3 常用场景](#11.3 常用场景)
- [11.3.1 不同位置的提示](#11.3.1 不同位置的提示)
- [11.4 核心 API](#11.4 核心 API)
- [11.5 注意事项](#11.5 注意事项)
[12. Alert 警告提示](#12. Alert 警告提示)
- [12.1 组件简介](#12.1 组件简介)
- [12.2 基础用法](#12.2 基础用法)
- [12.3 常用场景](#12.3 常用场景)
- [12.3.1 可关闭的警告](#12.3.1 可关闭的警告)
- [12.3.2 带图标的警告](#12.3.2 带图标的警告)
- [12.4 核心 API](#12.4 核心 API)
- [12.5 注意事项](#12.5 注意事项)
[13. Message 全局提示](#13. Message 全局提示)
- [13.1 组件简介](#13.1 组件简介)
- [13.2 基础用法](#13.2 基础用法)
- [13.3 常用场景](#13.3 常用场景)
- [13.3.1 自定义配置](#13.3.1 自定义配置)
- [13.4 核心 API](#13.4 核心 API)
- [13.5 注意事项](#13.5 注意事项)
[14. MessageBox 弹框](#14. MessageBox 弹框)
- [14.1 组件简介](#14.1 组件简介)
- [14.2 基础用法](#14.2 基础用法)
- [14.3 常用场景](#14.3 常用场景)
- [14.3.1 输入框弹框](#14.3.1 输入框弹框)
- [14.4 核心 API](#14.4 核心 API)
- [14.5 注意事项](#14.5 注意事项)
[15. Notification 通知](#15. Notification 通知)
- [15.1 组件简介](#15.1 组件简介)
- [15.2 基础用法](#15.2 基础用法)
- [15.3 常用场景](#15.3 常用场景)
- [15.3.1 不同位置的通知](#15.3.1 不同位置的通知)
- [15.4 核心 API](#15.4 核心 API)
- [15.5 注意事项](#15.5 注意事项)
[💡 综合实战案例](#💡 综合实战案例)
- 后台管理系统布局
[❓ 常见问题 FAQ](#❓ 常见问题 FAQ)
- [1. Menu 如何与 Vue Router 配合？](#1. Menu 如何与 Vue Router 配合？)
- [2. Dialog 关闭时如何重置表单？](#2. Dialog 关闭时如何重置表单？)
- [3. Message 如何避免重复显示？](#3. Message 如何避免重复显示？)
- [4. Tabs 如何实现路由联动？](#4. Tabs 如何实现路由联动？)
- [5. Drawer 如何传递数据？](#5. Drawer 如何传递数据？)
[📝 总结](#📝 总结)
- 组件使用频率
- 学习建议
[📚 参考资料](#📚 参考资料)
- 官方文档
- 相关技术文档

1.1 组件简介

Breadcrumb 面包屑用于显示当前页面在系统层级结构中的位置，帮助用户快速定位和导航。

💡 提示：面包屑常用于后台管理系统的页面导航，建议配合 Menu 组件使用。

1.2 基础用法

vue 复制代码

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户详情</el-breadcrumb-item>
  </el-breadcrumb>
</template>

1.3 常用场景

1.3.1 带图标的面包屑

vue 复制代码

<script setup lang="ts">
import { HomeFilled, User, Setting } from '@element-plus/icons-vue'
</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">
      <el-icon><HomeFilled /></el-icon>
      首页
    </el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/user' }">
      <el-icon><User /></el-icon>
      用户管理
    </el-breadcrumb-item>
    <el-breadcrumb-item>
      <el-icon><Setting /></el-icon>
      用户详情
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

1.3.2 自定义分隔符

vue 复制代码

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/list' }">列表</el-breadcrumb-item>
    <el-breadcrumb-item>详情</el-breadcrumb-item>
  </el-breadcrumb>
</template>

1.4 核心 API

属性名	类型	说明	默认值
separator	string	分隔符	'/'
separator-class	string	图标分隔符 class	-

BreadcrumbItem 属性

属性名	类型	说明	默认值
to	string/object	路由跳转对象	-
replace	boolean	使用 replace 跳转	false

1.5 注意事项

路由跳转 ：设置 to 属性后会自动渲染为 <router-link>
最后一项 ：最后一项通常不可点击，不设置 to 属性
配合路由：建议与 Vue Router 配合使用

📚 官方文档 ：Breadcrumb 面包屑 - Element Plus

2.1 组件简介

Menu 导航菜单用于为网站或应用提供导航功能，支持垂直和水平两种布局。

2.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'
import { HomeFilled, Setting, User } from '@element-plus/icons-vue'

const activeMenu = ref('home')

const handleSelect = (key: string) => {
  console.log('选中菜单:', key)
}
</script>

<template>
  <el-menu
    :default-active="activeMenu"
    class="menu"
    @select="handleSelect"
  >
    <el-menu-item index="home">
      <el-icon><HomeFilled /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="user">
      <el-icon><User /></el-icon>
      <span>用户管理</span>
    </el-menu-item>
    <el-menu-item index="setting">
      <el-icon><Setting /></el-icon>
      <span>系统设置</span>
    </el-menu-item>
  </el-menu>
</template>

2.3 常用场景

2.3.1 带子菜单的导航

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'
import { Document, Menu, Setting } from '@element-plus/icons-vue'

const activeMenu = ref('1-1')
</script>

<template>
  <el-menu :default-active="activeMenu" mode="vertical">
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Document /></el-icon>
        <span>文档管理</span>
      </template>
      <el-menu-item index="1-1">文档列表</el-menu-item>
      <el-menu-item index="1-2">文档分类</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><Menu /></el-icon>
      <span>菜单管理</span>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><Setting /></el-icon>
      <span>系统设置</span>
    </el-menu-item>
  </el-menu>
</template>

2.3.2 水平导航菜单

vue 复制代码

<template>
  <el-menu mode="horizontal" :default-active="activeMenu">
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">产品</el-menu-item>
    <el-sub-menu index="3">
      <template #title>关于我们</template>
      <el-menu-item index="3-1">公司简介</el-menu-item>
      <el-menu-item index="3-2">联系我们</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

2.4 核心 API

属性名	类型	说明	默认值
mode	string	菜单类型	'vertical'
default-active	string	当前激活菜单的 index	-
default-openeds	Array	当前打开的 sub-menu 的 index 数组	\[\]
router	boolean	是否使用 vue-router 的模式	false
collapse	boolean	是否水平折叠收起菜单	false
background-color	string	菜单背景色	'#ffffff'
text-color	string	菜单文字颜色	'#303133'
active-text-color	string	当前激活菜单的文字颜色	'#409eff'

2.5 注意事项

index 唯一 ：每个菜单项的 index 必须唯一
路由模式 ：设置 router 后，index 会作为路由路径
折叠菜单 ：设置 collapse 后，只显示图标
性能优化：菜单项过多时建议分组或使用子菜单

📚 官方文档 ：Menu 导航菜单 - Element Plus

3. Tabs 标签页

3.1 组件简介

Tabs 标签页用于在同一区域切换显示不同内容，节省页面空间。

3.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('first')
</script>

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理内容</el-tab-pane>
  </el-tabs>
</template>

3.3 常用场景

3.3.1 卡片风格标签页

vue 复制代码

<template>
  <el-tabs v-model="activeTab" type="card">
    <el-tab-pane label="选项卡1" name="first">内容1</el-tab-pane>
    <el-tab-pane label="选项卡2" name="second">内容2</el-tab-pane>
    <el-tab-pane label="选项卡3" name="third">内容3</el-tab-pane>
  </el-tabs>
</template>

3.3.2 动态增删标签页

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'

interface TabItem {
  name: string
  label: string
  content: string
  closable: boolean
}

const tabs = ref<TabItem[]>([
  { name: 'tab1', label: '标签1', content: '内容1', closable: false }
])
const activeTab = ref('tab1')
let tabIndex = 1

const addTab = () => {
  tabIndex++
  const newTab = {
    name: `tab${tabIndex}`,
    label: `标签${tabIndex}`,
    content: `内容${tabIndex}`,
    closable: true
  }
  tabs.value.push(newTab)
  activeTab.value = newTab.name
}

const removeTab = (name: string) => {
  const index = tabs.value.findIndex(tab => tab.name === name)
  if (index !== -1) {
    tabs.value.splice(index, 1)
    if (activeTab.value === name) {
      activeTab.value = tabs.value[Math.max(0, index - 1)]?.name || ''
    }
  }
}
</script>

<template>
  <div>
    <el-button @click="addTab">添加标签</el-button>
    <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
        :closable="tab.closable"
      >
        {{ tab.content }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

3.4 核心 API

属性名	类型	说明	默认值
v-model	string	绑定值，选中选项卡的 name	-
type	string	风格类型	''
closable	boolean	标签是否可关闭	false
tab-position	string	选项卡所在位置	'top'
stretch	boolean	标签的宽度是否自撑开	false

3.5 注意事项

name 唯一 ：每个 tab-pane 的 name 必须唯一
懒加载 ：使用 lazy 属性实现标签页懒加载
动态增删 ：配合 closable 和 @tab-remove 事件

📚 官方文档 ：Tabs 标签页 - Element Plus

4. Steps 步骤条

4.1 组件简介

Steps 步骤条用于引导用户按照流程完成任务，常用于表单分步填写、订单流程等场景。

4.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'

const activeStep = ref(0)
</script>

<template>
  <el-steps :active="activeStep" finish-status="success">
    <el-step title="步骤 1" description="填写基本信息" />
    <el-step title="步骤 2" description="上传相关资料" />
    <el-step title="步骤 3" description="确认并提交" />
  </el-steps>
  
  <div style="margin-top: 20px">
    <el-button @click="activeStep--" :disabled="activeStep === 0">上一步</el-button>
    <el-button @click="activeStep++" :disabled="activeStep === 2">下一步</el-button>
  </div>
</template>

4.3 常用场景

4.3.1 垂直步骤条

vue 复制代码

<template>
  <el-steps direction="vertical" :active="1">
    <el-step title="步骤 1" description="描述信息" />
    <el-step title="步骤 2" description="描述信息" />
    <el-step title="步骤 3" description="描述信息" />
  </el-steps>
</template>

4.3.2 简单步骤条

vue 复制代码

<template>
  <el-steps :active="1" simple>
    <el-step title="步骤 1" />
    <el-step title="步骤 2" />
    <el-step title="步骤 3" />
  </el-steps>
</template>

4.4 核心 API

属性名	类型	说明	默认值
active	number	设置当前激活步骤	0
space	number/string	每个 step 的间距	-
direction	string	显示方向	'horizontal'
finish-status	string	设置结束步骤的状态	'finish'
simple	boolean	是否应用简单风格	false

4.5 注意事项

active 从 0 开始：第一步的 active 值为 0
finish-status ：可设置为 success 显示成功图标
配合表单：常用于分步表单场景

📚 官方文档 ：Steps 步骤条 - Element Plus

5. PageHeader 页头

5.1 组件简介

PageHeader 页头用于显示页面的标题、返回按钮和额外操作。

5.2 基础用法

vue 复制代码

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const handleBack = () => {
  router.back()
}
</script>

<template>
  <el-page-header @back="handleBack" content="用户详情" />
</template>

5.3 常用场景

5.3.1 自定义页头内容

vue 复制代码

<template>
  <el-page-header @back="handleBack">
    <template #content>
      <span>用户详情</span>
      <el-tag style="margin-left: 10px">VIP</el-tag>
    </template>
    <template #extra>
      <el-button>编辑</el-button>
      <el-button type="danger">删除</el-button>
    </template>
  </el-page-header>
</template>

5.4 核心 API

属性名	类型	说明	默认值
title	string	标题	'返回'
content	string	内容	-
icon	string/component	图标	ArrowLeft

5.5 注意事项

返回按钮 ：默认显示返回按钮，可自定义 @back 事件
插槽扩展 ：使用 content 和 extra 插槽自定义内容
配合路由：常用于详情页返回上一页

📚 官方文档 ：PageHeader 页头 - Element Plus

6.1 组件简介

Dropdown 下拉菜单用于展示一组操作选项，点击或悬停触发显示。

6.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'

const handleCommand = (command: string) => {
  console.log('点击了:', command)
}
</script>

<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      下拉菜单
      <el-icon class="el-icon--right"><ArrowDown /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="add">新增</el-dropdown-item>
        <el-dropdown-item command="edit">编辑</el-dropdown-item>
        <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

6.3 常用场景

6.3.1 触发方式

vue 复制代码

<template>
  <!-- 点击触发 -->
  <el-dropdown trigger="click">
    <el-button>点击触发 <el-icon><ArrowDown /></el-icon></el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>选项1</el-dropdown-item>
        <el-dropdown-item>选项2</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <!-- 右键触发 -->
  <el-dropdown trigger="contextmenu">
    <el-button>右键触发</el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>复制</el-dropdown-item>
        <el-dropdown-item>粘贴</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

6.4 核心 API

属性名	类型	说明	默认值
trigger	string	触发方式	'hover'
placement	string	出现位置	'bottom'
hide-on-click	boolean	点击菜单项后是否隐藏	true
show-timeout	number	显示延迟（ms）	150
hide-timeout	number	隐藏延迟（ms）	150

6.5 注意事项

trigger 属性 ：支持 hover、click、contextmenu
hide-on-click ：设置 false 可保持下拉框显示
手动控制 ：使用 v-model:visible 可完全手动控制

📚 官方文档 ：Dropdown 下拉菜单 - Element Plus

7. Dialog 对话框

7.1 组件简介

Dialog 对话框用于在不离开当前页面的情况下显示额外信息或执行操作。

7.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
</script>

<template>
  <el-button @click="dialogVisible = true">打开对话框</el-button>
  
  <el-dialog v-model="dialogVisible" title="提示" width="500px">
    <span>这是一段对话框内容</span>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </template>
  </el-dialog>
</template>

7.3 常用场景

7.3.1 自定义头部和底部

vue 复制代码

<template>
  <el-dialog v-model="visible">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">自定义标题</h4>
    </template>
    <p>对话框内容</p>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

7.3.2 嵌套对话框

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'

const outerVisible = ref(false)
const innerVisible = ref(false)
</script>

<template>
  <el-button @click="outerVisible = true">打开外层对话框</el-button>
  
  <el-dialog v-model="outerVisible" title="外层对话框">
    <el-button @click="innerVisible = true">打开内层对话框</el-button>
    
    <el-dialog v-model="innerVisible" title="内层对话框" append-to-body>
      <p>这是嵌套的对话框</p>
    </el-dialog>
  </el-dialog>
</template>

7.4 核心 API

属性名	类型	说明	默认值
v-model	boolean	是否显示 Dialog	false
title	string	对话框标题	''
width	string	对话框宽度	'50%'
fullscreen	boolean	是否为全屏 Dialog	false
modal	boolean	是否需要遮罩层	true
close-on-click-modal	boolean	是否可以通过点击 modal 关闭	true
close-on-press-escape	boolean	是否可以通过按下 ESC 关闭	true
append-to-body	boolean	Dialog 自身是否插入至 body 元素上	false

7.5 注意事项

v-model 绑定 ：使用 v-model 控制显示/隐藏
嵌套对话框 ：内层对话框必须设置 append-to-body
表单验证：对话框关闭时记得重置表单
性能优化 ：使用 destroy-on-close 销毁内容

📚 官方文档 ：Dialog 对话框 - Element Plus

8. Drawer 抽屉

8.1 组件简介

Drawer 抽屉是从屏幕边缘滑出的面板，常用于筛选、详情展示等场景。

8.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'

const drawerVisible = ref(false)
</script>

<template>
  <el-button @click="drawerVisible = true">打开抽屉</el-button>
  
  <el-drawer v-model="drawerVisible" title="抽屉标题" size="50%">
    <p>抽屉内容</p>
  </el-drawer>
</template>

8.3 常用场景

8.3.1 不同方向的抽屉

vue 复制代码

<template>
  <el-radio-group v-model="direction">
    <el-radio label="ltr">从左到右</el-radio>
    <el-radio label="rtl">从右到左</el-radio>
    <el-radio label="ttb">从上到下</el-radio>
    <el-radio label="btt">从下到上</el-radio>
  </el-radio-group>
  
  <el-drawer v-model="visible" :direction="direction" title="抽屉标题">
    <p>抽屉内容</p>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const direction = ref('rtl')
</script>

8.4 核心 API

属性名	类型	说明	默认值
v-model	boolean	是否显示 Drawer	false
title	string	抽屉标题	''
direction	string	抽屉方向	'rtl'
size	string/number	抽屉大小	'30%'
modal	boolean	是否需要遮罩层	true
append-to-body	boolean	是否插入至 body	false

8.5 注意事项

direction 属性 ：支持 ltr、rtl、ttb、btt 四个方向
size 控制：根据方向不同，size 代表宽度或高度
与 Dialog 区别：Drawer 更适合侧边栏展示场景

📚 官方文档 ：Drawer 抽屉 - Element Plus

9.1 组件简介

Popover 气泡卡片点击或悬停在元素上时弹出的气泡卡片。

9.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <el-popover v-model:visible="visible" title="标题" :width="200" trigger="click">
    <template #reference>
      <el-button>点击触发</el-button>
    </template>
    <p>这是一段气泡卡片内容</p>
    <el-button size="small" @click="visible = false">关闭</el-button>
  </el-popover>
</template>

9.3 核心 API

属性名	类型	说明	默认值
v-model:visible	boolean	状态是否显示	false
trigger	string	触发方式	'click'
title	string	标题	''
width	string/number	宽度	150
placement	string	出现位置	'top'
show-after	number	延迟出现时间（ms）	0

9.4 注意事项

reference 插槽：必须设置触发元素
trigger 属性 ：支持 click、hover、focus、contextmenu
手动控制 ：使用 v-model:visible 可手动控制显示

📚 官方文档 ：Popover 气泡卡片 - Element Plus

10. Popconfirm 气泡确认框

10.1 组件简介

Popconfirm 气泡确认框用于点击元素时弹出的确认对话框，比 MessageBox 更轻量。

10.2 基础用法

vue 复制代码

<script setup lang="ts">
const handleConfirm = () => {
  console.log('确认删除')
}

const handleCancel = () => {
  console.log('取消删除')
}
</script>

<template>
  <el-popconfirm
    title="确定删除吗？"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <template #reference>
      <el-button type="danger">删除</el-button>
    </template>
  </el-popconfirm>
</template>

10.3 核心 API

属性名	类型	说明	默认值
title	string	标题	''
confirm-button-text	string	确认按钮文字	'确认'
cancel-button-text	string	取消按钮文字	'取消'
confirm-button-type	string	确认按钮类型	'primary'
cancel-button-type	string	取消按钮类型	''
icon	string/component	图标	QuestionFilled

10.4 注意事项

轻量级：比 MessageBox 更轻量，适合简单确认场景
reference 必填：必须设置触发元素
事件处理 ：使用 @confirm 和 @cancel 处理确认/取消

📚 官方文档 ：Popconfirm 气泡确认框 - Element Plus

11.1 组件简介

Tooltip 文字提示用于鼠标悬停时显示简单的提示信息。

11.2 基础用法

vue 复制代码

<template>
  <el-tooltip content="这是一段提示文字" placement="top">
    <el-button>悬停显示提示</el-button>
  </el-tooltip>
</template>

11.3 常用场景

11.3.1 不同位置的提示

vue 复制代码

<template>
  <div class="tooltip-demo">
    <el-tooltip content="上边提示" placement="top">
      <el-button>上</el-button>
    </el-tooltip>
    <el-tooltip content="下边提示" placement="bottom">
      <el-button>下</el-button>
    </el-tooltip>
    <el-tooltip content="左边提示" placement="left">
      <el-button>左</el-button>
    </el-tooltip>
    <el-tooltip content="右边提示" placement="right">
      <el-button>右</el-button>
    </el-tooltip>
  </div>
</template>

11.4 核心 API

属性名	类型	说明	默认值
content	string	显示内容	''
placement	string	出现位置	'bottom'
disabled	boolean	是否禁用 Tooltip	false
show-after	number	延迟显示（ms）	0
hide-after	number	延迟隐藏（ms）	200

11.5 注意事项

placement 属性 ：支持 top、bottom、left、right 及其组合
禁用提示 ：设置 disabled 可禁用 Tooltip
与 Popover 区别：Tooltip 只显示文字，Popover 可显示复杂内容

📚 官方文档 ：Tooltip 文字提示 - Element Plus

12. Alert 警告提示

12.1 组件简介

Alert 警告提示用于页面中展示重要的提示信息。

12.2 基础用法

vue 复制代码

<template>
  <el-alert title="成功提示" type="success" />
  <el-alert title="信息提示" type="info" />
  <el-alert title="警告提示" type="warning" />
  <el-alert title="错误提示" type="error" />
</template>

12.3 常用场景

12.3.1 可关闭的警告

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(true)

const handleClose = () => {
  console.log('警告已关闭')
}
</script>

<template>
  <el-alert
    v-if="visible"
    title="这是一条可关闭的警告"
    type="warning"
    closable
    @close="handleClose"
  />
</template>

12.3.2 带图标的警告

vue 复制代码

<template>
  <el-alert title="带图标的警告" type="error" show-icon />
  <el-alert title="自定义图标" type="success" :closable="false">
    <template #icon>
      <el-icon><Check /></el-icon>
    </template>
  </el-alert>
</template>

12.4 核心 API

属性名	类型	说明	默认值
title	string	标题	''
type	string	主题类型	'info'
description	string	辅助性文字	''
closable	boolean	是否可关闭	true
show-icon	boolean	是否显示图标	false
center	boolean	文字是否居中	false

12.5 注意事项

type 属性 ：支持 success、info、warning、error
description：可添加辅助性说明文字
自定义图标 ：使用 #icon 插槽自定义图标

📚 官方文档 ：Alert 警告提示 - Element Plus

13. Message 全局提示

13.1 组件简介

Message 全局提示用于展示操作后的反馈信息，自动消失。

13.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ElMessage } from 'element-plus'

const showMessage = () => {
  ElMessage('这是一条普通消息')
}

const showSuccess = () => {
  ElMessage.success('操作成功')
}

const showError = () => {
  ElMessage.error('操作失败')
}

const showWarning = () => {
  ElMessage.warning('这是一条警告')
}

const showInfo = () => {
  ElMessage.info('这是一条提示')
}
</script>

<template>
  <el-button @click="showMessage">普通消息</el-button>
  <el-button @click="showSuccess">成功</el-button>
  <el-button @click="showError">错误</el-button>
  <el-button @click="showWarning">警告</el-button>
  <el-button @click="showInfo">信息</el-button>
</template>

13.3 常用场景

13.3.1 自定义配置

vue 复制代码

<script setup lang="ts">
import { ElMessage } from 'element-plus'

const showCustomMessage = () => {
  ElMessage({
    message: '自定义配置消息',
    type: 'success',
    duration: 5000,
    showClose: true,
    offset: 100
  })
}
</script>

13.4 核心 API

属性名	类型	说明	默认值
message	string	消息文字	''
type	string	主题类型	'info'
duration	number	显示时间（ms），0 表示不自动关闭	3000
showClose	boolean	是否显示关闭按钮	false
offset	number	距离顶部的偏移量	20
position	string	弹出位置	'top'

13.5 注意事项

自动关闭：默认 3 秒后自动关闭
分组显示：相同内容的消息会合并显示
手动关闭 ：调用 message.close() 可手动关闭

📚 官方文档 ：Message 全局提示 - Element Plus

14. MessageBox 弹框

14.1 组件简介

MessageBox 弹框用于模拟系统的消息提示框，实现提示、确认、输入等功能。

14.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ElMessageBox, ElMessage } from 'element-plus'

const showConfirm = () => {
  ElMessageBox.confirm(
    '确定要删除这条记录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage('删除成功')
  }).catch(() => {
    ElMessage('已取消')
  })
}
</script>

<template>
  <el-button @click="showConfirm">删除确认</el-button>
</template>

14.3 常用场景

14.3.1 输入框弹框

vue 复制代码

<script setup lang="ts">
import { ElMessageBox, ElMessage } from 'element-plus'

const showInputBox = () => {
  ElMessageBox.prompt('请输入您的姓名', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^.{2,10}$/,
    inputErrorMessage: '姓名长度为 2-10 个字符'
  }).then(({ value }) => {
    ElMessage(`您输入的姓名是：${value}`)
  }).catch(() => {
    ElMessage('已取消输入')
  })
}
</script>

14.4 核心 API

方法	说明
ElMessageBox.alert	提示消息
ElMessageBox.confirm	确认消息
ElMessageBox.prompt	输入消息
ElMessageBox	自定义弹框

14.5 注意事项

Promise 处理 ：必须使用 .then() 和 .catch() 处理结果
输入验证 ：使用 inputPattern 和 inputErrorMessage 进行验证
与 Dialog 区别：MessageBox 更轻量，适合简单交互

📚 官方文档 ：MessageBox 弹框 - Element Plus

15. Notification 通知

15.1 组件简介

Notification 通知用于在页面角落显示全局通知消息。

15.2 基础用法

vue 复制代码

<script setup lang="ts">
import { ElNotification } from 'element-plus'

const showNotification = () => {
  ElNotification({
    title: '通知标题',
    message: '这是一条通知消息',
    type: 'success'
  })
}
</script>

<template>
  <el-button @click="showNotification">显示通知</el-button>
</template>

15.3 常用场景

15.3.1 不同位置的通知

vue 复制代码

<script setup lang="ts">
import { ElNotification } from 'element-plus'

const showNotification = (position: string) => {
  ElNotification({
    title: '通知',
    message: `这是${position}位置的通知`,
    position: position as any
  })
}
</script>

<template>
  <el-button @click="showNotification('top-right')">右上</el-button>
  <el-button @click="showNotification('top-left')">左上</el-button>
  <el-button @click="showNotification('bottom-right')">右下</el-button>
  <el-button @click="showNotification('bottom-left')">左下</el-button>
</template>

15.4 核心 API

属性名	类型	说明	默认值
title	string	标题	''
message	string	说明文字	''
type	string	主题类型	''
position	string	弹出位置	'top-right'
duration	number	显示时间（ms）	4500
offset	number	偏移量	0
showClose	boolean	是否显示关闭按钮	true

15.5 注意事项

position 属性 ：支持 top-right、top-left、bottom-right、bottom-left
自动关闭：默认 4.5 秒后自动关闭
与 Message 区别：Notification 显示在角落，Message 显示在顶部

📚 官方文档 ：Notification 通知 - Element Plus

💡 综合实战案例

后台管理系统布局

结合 Breadcrumb、Menu、Tabs、Dialog、Message 等组件实现完整的后台管理系统布局。

vue 复制代码

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  HomeFilled,
  User,
  Setting,
  Document,
  ArrowDown
} from '@element-plus/icons-vue'

const router = useRouter()
const activeMenu = ref('home')
const activeTab = ref('home')
const dialogVisible = ref(false)
const userName = ref('管理员')

// 菜单选择
const handleMenuSelect = (key: string) => {
  activeMenu.value = key
  activeTab.value = key
  ElMessage.success(`切换到: ${key}`)
}

// 用户操作
const handleUserCommand = (command: string) => {
  switch (command) {
    case 'profile':
      dialogVisible.value = true
      break
    case 'logout':
      ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ElMessage.success('已退出登录')
        router.push('/login')
      })
      break
  }
}

// 标签页管理
interface TabItem {
  name: string
  label: string
  content: string
}

const tabs = ref<TabItem[]>([
  { name: 'home', label: '首页', content: '欢迎使用后台管理系统' }
])

const addTab = (name: string, label: string) => {
  if (!tabs.value.find(tab => tab.name === name)) {
    tabs.value.push({ name, label, content: `${label}内容` })
  }
  activeTab.value = name
}

const removeTab = (name: string) => {
  const index = tabs.value.findIndex(tab => tab.name === name)
  if (index !== -1 && tabs.value.length > 1) {
    tabs.value.splice(index, 1)
    if (activeTab.value === name) {
      activeTab.value = tabs.value[Math.max(0, index - 1)].name
    }
  }
}
</script>

<template>
  <div class="admin-layout">
    <!-- 顶部导航 -->
    <el-header class="header">
      <div class="header-left">
        <h2>后台管理系统</h2>
      </div>
      <div class="header-right">
        <el-dropdown @command="handleUserCommand">
          <span class="user-info">
            <el-avatar :size="32">{{ userName[0] }}</el-avatar>
            <span>{{ userName }}</span>
            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item command="setting">系统设置</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <div class="main-container">
      <!-- 侧边菜单 -->
      <el-aside width="200px">
        <el-menu
          :default-active="activeMenu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="home">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="user">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="user-list" @click="addTab('user-list', '用户列表')">
              用户列表
            </el-menu-item>
            <el-menu-item index="user-role" @click="addTab('user-role', '角色管理')">
              角色管理
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="document" @click="addTab('document', '文档管理')">
            <el-icon><Document /></el-icon>
            <span>文档管理</span>
          </el-menu-item>
          <el-menu-item index="setting" @click="addTab('setting', '系统设置')">
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/" style="margin-bottom: 20px">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ activeTab }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 标签页 -->
        <el-tabs
          v-model="activeTab"
          type="card"
          closable
          @tab-remove="removeTab"
        >
          <el-tab-pane
            v-for="tab in tabs"
            :key="tab.name"
            :label="tab.label"
            :name="tab.name"
          >
            {{ tab.content }}
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </div>

    <!-- 个人中心对话框 -->
    <el-dialog v-model="dialogVisible" title="个人中心" width="500px">
      <p>用户名：{{ userName }}</p>
      <p>角色：管理员</p>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.admin-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
}

.header-left h2 {
  margin: 0;
  font-size: 18px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.main-container {
  display: flex;
  flex: 1;
}

.el-aside {
  background: #fff;
  border-right: 1px solid #e4e7ed;
}

.el-main {
  background: #f5f7fa;
  padding: 20px;
}
</style>

❓ 常见问题 FAQ

解决方案 ：设置 router 属性，index 会作为路由路径。

vue 复制代码

<el-menu :default-active="$route.path" router>
  <el-menu-item index="/home">首页</el-menu-item>
  <el-menu-item index="/user">用户管理</el-menu-item>
</el-menu>

📖 扩展阅读 ：Vue Router 官方文档

2. Dialog 关闭时如何重置表单？

解决方案 ：监听 @close 事件，调用表单重置方法。

vue 复制代码

<el-dialog v-model="visible" @close="resetForm">
  <el-form ref="formRef" :model="form">
    <!-- 表单项 -->
  </el-form>
</el-dialog>

<script setup lang="ts">
const formRef = ref()
const resetForm = () => {
  formRef.value?.resetFields()
}
</script>

3. Message 如何避免重复显示？

解决方案 ：使用 ElMessage.closeAll() 关闭所有消息。

vue 复制代码

<script setup lang="ts">
import { ElMessage } from 'element-plus'

const showMessage = () => {
  ElMessage.closeAll()
  ElMessage.success('操作成功')
}
</script>

4. Tabs 如何实现路由联动？

解决方案 ：监听 @tab-click 事件，切换路由。

vue 复制代码

<el-tabs v-model="activeTab" @tab-click="handleTabClick">
  <el-tab-pane label="用户列表" name="user-list" />
  <el-tab-pane label="角色管理" name="role-manage" />
</el-tabs>

<script setup lang="ts">
const handleTabClick = (tab: any) => {
  router.push({ name: tab.paneName })
}
</script>

5. Drawer 如何传递数据？

解决方案：使用 props 或 provide/inject 传递数据。

vue 复制代码

<el-drawer v-model="visible">
  <user-detail :user-id="selectedUserId" />
</el-drawer>

📝 总结

本文介绍了 Element Plus 的 15 个导航与反馈组件，涵盖面包屑、菜单、对话框、消息提示等常用场景。

组件使用频率

组件	使用频率	推荐指数
Menu	⭐⭐⭐⭐⭐	必学
Dialog	⭐⭐⭐⭐⭐	必学
Message	⭐⭐⭐⭐⭐	必学
Tabs	⭐⭐⭐⭐	高频
Tooltip	⭐⭐⭐⭐	高频
Breadcrumb	⭐⭐⭐⭐	高频
Drawer	⭐⭐⭐⭐	高频
Dropdown	⭐⭐⭐	常用
MessageBox	⭐⭐⭐	常用
Alert	⭐⭐⭐	常用
Notification	⭐⭐⭐	常用
Popconfirm	⭐⭐	一般
Popover	⭐⭐	一般
Steps	⭐⭐	一般
PageHeader	⭐⭐	一般

学习建议

优先掌握 Menu、Dialog、Message 三个核心组件
反馈组件（Message、MessageBox、Notification）根据场景选择
导航组件配合 Layout 实现完整布局
建议配合官方文档学习，获取最新 API 信息

Element Plus 导航与反馈组件完全指南（15个核心组件）

文章目录

1. Breadcrumb 面包屑

1.1 组件简介

1.2 基础用法

1.3 常用场景

1.3.1 带图标的面包屑

1.3.2 自定义分隔符

1.4 核心 API

Breadcrumb 属性

BreadcrumbItem 属性

1.5 注意事项

2. Menu 导航菜单

2.1 组件简介

2.2 基础用法

2.3 常用场景

2.3.1 带子菜单的导航

2.3.2 水平导航菜单

2.4 核心 API

2.5 注意事项

3. Tabs 标签页

3.1 组件简介

3.2 基础用法

3.3 常用场景

3.3.1 卡片风格标签页

3.3.2 动态增删标签页

3.4 核心 API

3.5 注意事项

4. Steps 步骤条

4.1 组件简介

4.2 基础用法

4.3 常用场景

4.3.1 垂直步骤条

4.3.2 简单步骤条

4.4 核心 API

4.5 注意事项

5. PageHeader 页头

5.1 组件简介

5.2 基础用法

5.3 常用场景

5.3.1 自定义页头内容

5.4 核心 API

5.5 注意事项

6. Dropdown 下拉菜单

6.1 组件简介

6.2 基础用法

6.3 常用场景

6.3.1 触发方式

6.4 核心 API

6.5 注意事项

7. Dialog 对话框

7.1 组件简介

7.2 基础用法

7.3 常用场景

7.3.1 自定义头部和底部

7.3.2 嵌套对话框

7.4 核心 API

7.5 注意事项

8. Drawer 抽屉

8.1 组件简介

8.2 基础用法

8.3 常用场景

8.3.1 不同方向的抽屉

8.4 核心 API

8.5 注意事项

9. Popover 气泡卡片

9.1 组件简介

9.2 基础用法

9.3 核心 API

9.4 注意事项

10. Popconfirm 气泡确认框

10.1 组件简介

10.2 基础用法

10.3 核心 API

10.4 注意事项

11. Tooltip 文字提示

11.1 组件简介

11.2 基础用法

11.3 常用场景

11.3.1 不同位置的提示