页头组件 (PageHeader)

Element UI 的 PageHeader 组件用于在页面中提供一个简单的页头结构，通常用于展示当前页面的标题和返回操作。如果页面的路径结构较为简单，可以使用 PageHeader 组件代替面包屑组件。

提示

PageHeader 组件官方文档：https://element.eleme.cn/#/zh-CN/component/page-header (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-page-header> 标签创建一个页头，通过 title 属性设置标题，通过 content 属性设置内容。

<template>
  <el-page-header
    @back="handleBack"
    title="返回"
    content="页面详情"
  ></el-page-header>
</template>

<script>
export default {
  methods: {
    handleBack() {
      this.$message('返回按钮被点击');
    }
  }
};
</script>

• 标题 (title)：通过 title 属性指定页头的标题。
• 内容 (content)：通过 content 属性设置页头的内容。
• 返回事件 (back)：点击页头左侧区域（通常是返回箭头）时触发 back 事件，可以通过事件回调函数处理返回逻辑。
• 

2. PageHeader 属性

参数	说明	类型	可选值	默认值
title	标题	string	—	返回
content	内容	string	—	—

• title：指定页头的标题。默认为“返回”。
• content：提供页头的附加内容描述，可以是页面的详细信息。

3. PageHeader 事件

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

• back：当用户点击页头左侧区域（返回箭头或标题）时触发。通常用于返回上一页或处理自定义返回逻辑。

4. PageHeader 插槽

插槽名称	说明
title	自定义标题
content	自定义内容

• title：自定义标题内容，覆盖 title 属性的设置。
• content：自定义内容区域，覆盖 content 属性的设置。

5. 常见使用示例

示例 1: 基本页头

在页面中使用基本的 PageHeader 组件，展示一个简单的标题和内容。

<template>
  <el-page-header
    title="返回"
    content="这是一个简单的页头"
    @back="handleBack"
  ></el-page-header>
</template>

<script>
export default {
  methods: {
    handleBack() {
      this.$message('返回按钮被点击');
    }
  }
};
</script>

• 效果：点击返回按钮，会触发 handleBack 方法并显示提示信息。
• 

示例 2: 自定义标题和内容

通过插槽自定义标题和内容，展示更加灵活的页头内容。

<template>
  <el-page-header @back="handleBack">
    <template #title>
      <el-icon><i class="el-icon-arrow-left"></i></el-icon> 自定义标题
    </template>
    <template #content>
      自定义内容描述，可以是更多的文本信息或操作按钮
    </template>
  </el-page-header>
</template>

<script>
export default {
  methods: {
    handleBack() {
      this.$message('自定义返回逻辑');
    }
  }
};
</script>

• 效果：通过插槽自定义了标题和内容，使得页头更具个性化和扩展性。
• 

6. 常见场景与注意事项

• 简单页面的导航：PageHeader 组件适用于路径结构简单的页面导航，用户通过点击返回按钮可以快速返回上一页。
• 替代面包屑：对于不需要复杂路径显示的页面，PageHeader 组件是一个比面包屑组件更轻量的选择。
• 插槽灵活性：通过插槽可以灵活定制标题和内容部分，满足不同场景下的需求。

总结

• 属性简单明了：PageHeader 组件的属性比较少，主要是 title 和 content，使得配置非常简洁。
• 事件和插槽支持：提供 back 事件和自定义插槽，满足大部分的场景需求。
• 适合简单路径页面：在路径结构简单的页面中，PageHeader 是一个理想的选择，可以取代面包屑组件。