PageHeader 页面标题

AuPageHeader 组合标题、说明、返回操作及右侧操作区。窄容器中操作区自动换行。

基础用法

内容概览

查看和整理当前内容

共 12 个条目

<script setup>
import { ref } from 'vue';
import { AuButton, AuPageHeader, AuTag } from 'aurora-plus';
const hint = ref('共 12 个条目');
</script>
<template>
  <div class="page-header-example">
    <AuPageHeader title="内容概览" description="查看和整理当前内容" back @back="hint = '已触发返回'">
      <template #extra>
        <AuButton size="small" @click="hint = '已刷新'">刷新</AuButton>
        <AuButton type="primary" size="small" @click="hint = '已触发新增'">新增</AuButton>
      </template>
      <AuTag>{{ hint }}</AuTag>
    </AuPageHeader>
  </div>
</template>
<style scoped>
.page-header-example { width: 100%; }
</style>

组件通过 back 事件通知返回操作，路由或历史切换由调用方处理。

PageHeader API

Attributes

属性	说明	类型	默认值
title	标题	string	''
description	标题说明	string	''
back	显示返回按钮	boolean	false
titleTag	标题标签：h1 / h2 / h3	string	h2

Events

事件名	说明	参数
back	点击返回按钮	(event)

Slots

插槽名	说明
title	标题
description	说明
extra	右侧操作区
default	标题下方内容