el-page-header ElementPlus PageHeader 页头

el-page-header

el-page-header 是 Element UI 中的一个组件，它可以帮助开发者快速构建页面头部，提供了一系列的功能，让开发者可以快速实现头部的布局。

el-page-header 的使用非常简单，只需要在 Vue 组件中引入 el-page-header 组件，然后在 template 中使用即可。

// 引入 el-page-header 组件
import { ElPageHeader } from 'element-ui'
export default {
  components: { ElPageHeader },

  // 在 template 中使用 el-page-header 组件
  template: `<el-page-header></el-page-header>`
}

el-page-header 支持很多属性，比如 background、title、subTitle、content、extraContent 等。这些属性都是用来设置头部的内容和样式的。

// 设置头部背景图片为图片 url 地址：background="https://xxx.jpg"

此外，el-page-header 还支持自定义 slot 插槽，我们可以在 slot 插槽中自定义内容来扩展 el-page-header 的功能。

// 自定义 slot 插槽内容   <el page header>   <div slot="title">My Title</div>   </el page header>

最后，el page header 还有一个很重要的功能就是监听 scroll 事件，当页面向下滚动时会触发 scroll 事件，我们可以监听这个事件来执行一些特定的代码逻辑。

:scroll="handleScroll" // handleScroll 是监听 scroll 事件时要执行的函数 
ElementPlus PageHeader 页头
PageHeader 页头
如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
基础用法

<template>
  <el-page-header @back="goBack" content="详情页面"> </el-page-header>
</template>

<script>
  export default {
    methods: {
      goBack() {
        console.log("go back")
      },
    },
  }
</script>
自定义图标

<template>
  <el-page-header icon="el-icon-arrow-left" content="详情页面"></el-page-header>
</template>

Attributes
参数
说明
类型
可选值
默认值
icon
图标
string
—
el-icon-back
title
标题
string
—
返回
content
内容
string
—
—
Events
事件名称
说明
回调参数
back
点击左侧区域触发
—
Slots
事件名称
说明
icon
自定义图标
title
标题内容
content
内容