页头 PageHeader

对应 Arco PageHeader：content 表示页面标题，返回区保留 Element Plus 文字。 属性用法见 Element Plus 文档。

基础页头

content 对应 Arco title，返回事件可交给应用处理。

Back

Project details

<script setup lang="ts">
import { ref } from 'vue'
const status = ref('')
</script>

<template>
  <el-page-header content="Project details" @back="status = 'Back requested'" style="width: 100%" />
  <el-text aria-live="polite">{{ status }}</el-text>
</template>

返回文字与操作

title 是 Arco 没有的返回文字，extra 插槽用于右侧操作。

Projects

Overview

<script setup lang="ts">
import { ref } from 'vue'
const status = ref('')
</script>

<template>
  <el-page-header title="Projects" content="Overview" @back="status = 'Projects requested'" style="width: 100%">
    <template #extra><el-button type="primary">Save</el-button></template>
  </el-page-header>
  <el-text aria-live="polite">{{ status }}</el-text>
</template>

与 Arco 的差异

• 返回文字始终显示，Arco 没有对应文字；箭头使用 Element Plus 图标。