PageHeader 页头

如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。

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

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

完整示例

适合详情页、工作台等信息更完整的场景，可同时组合面包屑、标题区、操作区与默认内容区。

<template>
  <div aria-label="页头完整示例">
    <el-page-header @back="onBack">
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>项目管理</el-breadcrumb-item>
          <el-breadcrumb-item>项目详情</el-breadcrumb-item>
        </el-breadcrumb>
      </template>

      <template #content>
        <div class="content-row">
          <div class="avatar">R</div>
          <span class="title">数字海南一体化平台</span>
          <span class="subtitle">政务协同项目</span>
          <el-tag>进行中</el-tag>
        </div>
      </template>

      <template #extra>
        <div class="extra-row">
          <el-button>打印</el-button>
          <el-button type="primary">编辑</el-button>
        </div>
      </template>

      <el-descriptions :column="3" size="small" class="descriptions">
        <el-descriptions-item label="负责人">DHdesign Team</el-descriptions-item>
        <el-descriptions-item label="联系电话">0898-12345678</el-descriptions-item>
        <el-descriptions-item label="所属地区">海口</el-descriptions-item>
        <el-descriptions-item label="环境">
          <el-tag size="small">生产</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="项目地址">
          海南省海口市美兰区数字政务中心
        </el-descriptions-item>
      </el-descriptions>

      <p class="summary">
        DHdesign 基于 Element Plus 二次封装，用于统一双端组件体验与文档交付方式。
      </p>
    </el-page-header>
  </div>
</template>

<script lang="ts" setup>
import {
  Breadcrumb,
  BreadcrumbItem,
  Button,
  Descriptions,
  DescriptionsItem,
  Notification,
  PageHeader,
  Tag,
} from '@szhn/dh-design-pc'


function onBack() {
  Notification({
    title: '返回',
    message: '已触发返回操作',
    type: 'info',
  })
}
</script>

<style scoped>
.content-row,
.extra-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--el-color-primary-light-7);
  color: var(--el-color-primary);
  font-weight: 700;
}

.title {
  font-size: 18px;
  font-weight: 600;
}

.subtitle {
  color: var(--el-text-color-regular);
}

.descriptions {
  margin-top: 16px;
}

.summary {
  margin: 16px 0 0;
  color: var(--el-text-color-regular);
  line-height: 1.8;
}
</style>

基础用法

简单场景下的标准页头。

<template>
  <el-page-header content="详情页面" @back="onBack">
    <template #extra>
      <el-button>操作</el-button>
    </template>
  </el-page-header>
</template>

<script lang="ts" setup>
import { PageHeader as ElPageHeader, Button as ElButton } from '@szhn/dh-design-pc'


function onBack() {
  window.history.back()
}
</script>

自定义图标

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

<template>
  <el-page-header :icon="Edit" content="编辑资料" @back="onBack" />
</template>

<script lang="ts" setup>
import { PageHeader as ElPageHeader } from '@szhn/dh-design-pc'
import { Edit } from '@szhn/dh-design-pc/icons'


function onBack() {
  window.history.back()
}
</script>

无图标

将 icon 属性设置为 null 或空字符串可去掉图标。

<template>
  <el-page-header :icon="null" title="页面标题" content="无图标页头" @back="onBack" />
</template>

<script lang="ts" setup>
import { PageHeader as ElPageHeader } from '@szhn/dh-design-pc'


function onBack() {
  window.history.back()
}
</script>

面包屑导航

通过具名插槽 breadcrumb 可为页头添加面包屑导航。

<template>
  <el-page-header content="详情页" @back="onBack">
    <template #breadcrumb>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>列表</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
  </el-page-header>
</template>

<script lang="ts" setup>
import { PageHeader as ElPageHeader, Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from '@szhn/dh-design-pc'


function onBack() {
  window.history.back()
}
</script>

额外操作区

使用 extra 插槽添加按钮、下拉等操作项。

<template>
  <el-page-header content="用户详情" @back="onBack">
    <template #extra>
      <el-button>查看</el-button>
      <el-button type="primary">编辑</el-button>
    </template>
  </el-page-header>
</template>

<script lang="ts" setup>
import { PageHeader as ElPageHeader, Button as ElButton } from '@szhn/dh-design-pc'


function onBack() {
  window.history.back()
}
</script>

主要内容

通过 default 插槽放置页面主要内容，实现更丰富的页头交互。

<template>
  <el-page-header content="项目信息" @back="onBack">
    <div class="content">
      <p>这里可以放置页面的主要内容，比如详情描述、指标块、说明文案等。</p>
      <p>DHdesign 组件库基于 Element Plus 二次封装。</p>
    </div>
  </el-page-header>
</template>

<script lang="ts" setup>
import { PageHeader as ElPageHeader } from '@szhn/dh-design-pc'


function onBack() {
  window.history.back()
}
</script>

<style scoped>
.content {
  margin-top: 12px;
  color: var(--el-text-color-regular);
  line-height: 1.8;
}
</style>

Anatomy

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

vue

<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 文档。

PageHeader 页头 ​

完整示例 ​

基础用法 ​

自定义图标 ​

无图标 ​

面包屑导航 ​

额外操作区 ​

主要内容 ​

Anatomy ​

API ​

PageHeader Attributes ​

PageHeader Events ​

PageHeader Slots ​