用途: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 插槽承载页面内容。
限制:资料未提供该组件的版本兼容性、样式定制细节、无障碍支持及注意事项等,暂未提供。