PageHeader 页头

如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。页头提供返回、标题、说明文案与右侧操作区。

import { createApp } from 'vue'
import { ElPageHeader } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElPageHeader)

基础用法

返回图标 + 标题 + 说明文案，对应设计基础态。

右侧分段选项

在 extra 中放置选项组，适合视图切换。

右侧操作按钮

在 extra 中放置次要 / 主要操作按钮。

面包屑导航

通过 breadcrumb 插槽在标题上方展示路径。

面包屑 + 分段选项

路径导航与右侧选项组组合。

面包屑 + 操作按钮

路径导航与右侧操作按钮组合。

自定义图标

默认图标可能无法满足需求，可通过 icon 属性或具名插槽自定义返回图标。

无图标

将 icon 属性设置为 null 可去掉图标。

主要内容

通过 default 插槽放置页头下方的补充内容。

Anatomy

组件由以下几个区域组成：

<template>
  <el-page-header>
    <template #breadcrumb />
    <template #icon />
    <template #title />
    <template #content />
    <template #extra />
    <template #default />
  </el-page-header>
</template>

API

PageHeader Attributes

属性名	说明	类型	默认值
icon	返回图标组件	string / Component	Back
title	主标题（与返回图标同一点击区域）	string	返回
content	说明文案（标题右侧，竖线分隔）	string	''

PageHeader Events

事件名	说明	参数
back	点击左侧返回区域触发	—

PageHeader Slots

插槽名	说明
icon	图标内容
title	标题内容
content	说明文案区
extra	右侧扩展操作
breadcrumb	面包屑导航
default	页头下方默认内容

更多内容参见 Element Plus PageHeader 文档。