SuperAPI AI 工具集

el-page-header

前端与建站

查看项目

更新于 10-15 23:32

技能介绍

用途:el-page-header 是 Element Plus 提供的页面头部组件,用于构建带返回导航的页面标题区域,适合在详情页、子页面等需要返回上级的界面中使用。

主要能力:提供返回按钮并触发 back 事件;支持通过 title、content 属性设置主标题与内容文本;提供 icon 插槽自定义图标。

插槽:icon(自定义图标)、title(自定义标题)、content(自定义内容)、extra(额外区域,常用于放置操作按钮)、breadcrumb(面包屑区域,可搭配 el-breadcrumb 使用)、default(主内容区)。

属性:icon,类型为 string 或 Component,默认值为 Back;title,类型 string,默认 '';content,类型 string,默认 ''。

事件:back,返回按钮被点击时触发,类型 () => void。

基本用法:使用 <el-page-header> 并绑定 @back 事件处理返回逻辑,通过 #content 插槽自定义标题内容。自定义图标可传入图标组件(如从 @element-plus/icons-vue 引入 ArrowLeft);若将 icon 设为空字符串则不显示图标。

最佳实践:用 breadcrumb 插槽展示导航路径,用 extra 插槽放置操作按钮,用 default 插槽承载页面内容。

限制:资料未提供该组件的版本兼容性、样式定制细节、无障碍支持及注意事项等,暂未提供。