在 Vue 2 中，Element UI 并沒有一個直接命名為 PageHeader 的組件。然而，你可能是在尋找一種方式來創建自定義的頁頭（Page Header），這通常是通過組合 Element UI 的其他組件（如 el-header、el-row、el-col、el-title 等）來實現的。

但在 Vue 3 的 Element Plus 中，確實有一個 el-page-header 組件，用于展示頁面的頁頭信息。下面我將分別介紹如何在 Vue 2 和 Vue 3 中實現類似的功能，并特別關注 Vue 3 中 el-page-header 組件的屬性、事件和方法。

Vue 2 + 自定義頁頭

在 Vue 2 中，你可以使用 Element UI 的基礎組件來構建自定義的頁頭。

示例

<template><el-header><el-row><el-col :span="24"><h1>頁面標題</h1><div>頁面描述或副標題</div></el-col></el-row></el-header>
</template><script>
export default {// ...
};
</script>

在這個例子中，我們使用了 el-header、el-row 和 el-col 組件來布局頁頭，并使用 h1 和 div 元素來顯示標題和描述。

Vue 3 + Element Plus PageHeader

在 Vue 3 中，你可以使用 Element Plus 的 el-page-header 組件來快速創建一個頁頭。

屬性（Props）

• title：頁頭標題。
• content：頁頭內容，通常為描述性文本。
• tags：標簽列表，通常用于顯示頁面的標簽或分類。
• avatar：頭像圖片的 URL。
• breadcrumb：面包屑導航配置。
• back-icon：返回圖標的類名。
• ...：其他基礎屬性，如 class、style 等。

事件（Events）

el-page-header 組件在 Element Plus 中并沒有定義特定的事件。

方法（Methods）

el-page-header 組件沒有直接暴露任何方法供外部調用。

示例

<template><el-page-header:title="title":content="content":avatar="avatarUrl":breadcrumb="[{ to: '/', label: '首頁' }, { to: '/about', label: '關于' }]"><template #tags><el-tag>標簽1</el-tag><el-tag>標簽2</el-tag></template></el-page-header>
</template><script setup>
import { ref } from 'vue';const title = ref('頁面標題');
const content = ref('頁面描述或副標題');
const avatarUrl = ref('https://example.com/avatar.png');
</script>

在這個例子中，我們使用了 el-page-header 組件，并通過 title、content 和 avatar 屬性分別設置了頁頭的標題、內容和頭像。我們還通過 breadcrumb 屬性配置了面包屑導航，并通過插槽 #tags 添加了標簽。請注意，由于 Element Plus 的 API 可能會隨著版本更新而發生變化，因此建議查閱最新的官方文檔以獲取最準確的信息。