FxPageHeader 页头

如果页面路径简单，推荐使用 FxPageHeader 代替面包屑。

完整示例

<template>
  <div aria-label="页头完整示例">
    <FxPageHeader @back="onBack">
      <template #breadcrumb>
        <FxBreadcrumb separator="/">
          <FxBreadcrumbItem :to="{ path: './page-header.html' }">
            首页
          </FxBreadcrumbItem>
          <FxBreadcrumbItem>
            <a href="./page-header.html">路由 1</a>
          </FxBreadcrumbItem>
          <FxBreadcrumbItem>路由 2</FxBreadcrumbItem>
        </FxBreadcrumb>
      </template>
      <template #content>
        <div class="flex items-center">
          <FxAvatar
            class="mr-3"
            :size="32"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <span class="text-large font-600 mr-3">标题</span>
          <span class="text-sm mr-2" style="color: var(--fx-text-color-regular)">
            副标题
          </span>
          <FxTag>默认</FxTag>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <FxBtn>打印</FxBtn>
          <FxBtn type="primary" class="ml-2">编辑</FxBtn>
        </div>
      </template>

      <FxDescriptions :column="3" size="small" class="mt-4">
        <FxDescriptionsItem label="用户名">
          kooriookami
        </FxDescriptionsItem>
        <FxDescriptionsItem label="手机号">
          18100000000
        </FxDescriptionsItem>
        <FxDescriptionsItem label="地区">苏州</FxDescriptionsItem>
        <FxDescriptionsItem label="备注">
          <FxTag size="small">学校</FxTag>
        </FxDescriptionsItem>
        <FxDescriptionsItem label="地址">
          江苏省苏州市吴中区吴中大道 1188 号
        </FxDescriptionsItem>
      </FxDescriptions>
      <p class="mt-4 text-sm">
        fx-admin 团队采用 <b>每周</b> 发布策略，但关键 bug 修复会走热修复，因此实际发布次数 <b>可能</b> 每周超过 1 次。
      </p>
    </FxPageHeader>
  </div>
</template>

<script lang="ts" setup>
const onBack = () => {
  alert("返回")
}
</script>

基础用法

标准页头，用于简单场景。

<template>
  <FxPageHeader @back="goBack">
    <template #content>
      <span class="text-large font-600 mr-3">标题</span>
    </template>
  </FxPageHeader>
</template>

<script lang="ts" setup>
const goBack = () => {
  console.log("go back")
}
</script>

自定义图标

默认图标不满意时，可通过 icon 属性自定义（图标名或组件）。

<template>
  <FxPageHeader icon="ep:arrow-left">
    <template #content>
      <span class="text-large font-600 mr-3">标题</span>
    </template>
  </FxPageHeader>
</template>

无图标

页面元素较多时，可设置 icon="" 隐藏图标。

<template>
  <FxPageHeader icon="">
    <template #content>
      <span class="text-large font-600 mr-3">标题</span>
    </template>
  </FxPageHeader>
</template>

面包屑

通过 breadcrumb 插槽添加面包屑，提供路由信息。

<template>
  <FxPageHeader>
    <template #breadcrumb>
      <FxBreadcrumb separator="/">
        <FxBreadcrumbItem :to="{ path: './page-header.html' }">
          首页
        </FxBreadcrumbItem>
        <FxBreadcrumbItem>
          <a href="./page-header.html">路由 1</a>
        </FxBreadcrumbItem>
        <FxBreadcrumbItem>路由 2</FxBreadcrumbItem>
      </FxBreadcrumb>
    </template>
    <template #content>
      <span class="text-large font-600 mr-3">标题</span>
    </template>
  </FxPageHeader>
</template>

附加操作区

页头可按需复杂化，通过 extra 插槽添加附加操作区。

<template>
  <FxPageHeader icon="">
    <template #content>
      <div class="flex items-center">
        <FxAvatar
          :size="32"
          class="mr-3"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <span class="text-large font-600 mr-3">标题</span>
        <span class="text-sm mr-2" style="color: var(--fx-text-color-regular)">
          副标题
        </span>
        <FxTag>默认</FxTag>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <FxBtn>打印</FxBtn>
        <FxBtn type="primary" class="ml-2">编辑</FxBtn>
      </div>
    </template>
  </FxPageHeader>
</template>

主内容

通过默认插槽放置与页头对应的内容。

<template>
  <FxPageHeader>
    <template #content>
      <span class="text-large font-600 mr-3">标题</span>
    </template>
    <div class="mt-4 text-sm font-bold">
      通过默认插槽添加附加内容，可以放置任意多内容。
    </div>
  </FxPageHeader>
</template>

结构

组件由以下部分组成：

<template>
  <FxPageHeader>
    <!-- 第 1 行 -->
    <template #breadcrumb />
    <!-- 第 2 行 -->
    <template #icon />
    <template #title />
    <template #content />
    <template #extra />
    <!-- 第 2 行之后 -->
    <template #default />
  </FxPageHeader>
</template>

API

Attributes

属性	说明	类型	默认值
icon	图标：图标名或组件	string | Component	ep:back
title	主标题，省略时默认"返回"	string	—
content	内容文字	string	''

Events

事件名	说明	类型
back	点击返回区时触发	() => void

Slots

插槽名	说明
icon	自定义图标
title	自定义标题
content	自定义内容
extra	附加操作区
breadcrumb	面包屑
default	主内容