036_PageHeader页头

最新推荐文章于 2025-09-07 10:23:17 发布

原创最新推荐文章于 2025-09-07 10:23:17 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

element-ui 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了如何在前端项目中使用Element UI的PageHeader组件，通过实例演示了其在简单路径场景下的优势，并展示了如何配置和使用它的属性、事件和slot。跟随步骤创建一个带有事件处理的PageHeader组件，提升页面头部的易用性和信息呈现效率。

1. PageHeader页头

1.1. 如果页面的路径比较简单, 推荐使用页头组件而非面包屑组件。

1.2. Attributes

参数	说明	类型	可选值	默认值
title	标题	string	无	返回
content	内容	string		无

1.3. Events

事件名称	说明	回调参数
back	点击左侧区域触发	无

1.4. Slots

事件名称	说明
title	标题内容
content	内容

2. PageHeader页头例子

2.1. 使用脚手架新建一个名为element-ui-pageheader的前端项目, 同时安装Element插件。

2.2. 在components下创建PageHeader.vue

<template>
  <div>
    <h1>基础</h1>
    <h4>如果页面的路径比较简单, 推荐使用页头组件而非面包屑组件。</h4>
    <el-page-header @back="goBack" content="详情页面"></el-page-header>
  </div>
</template>

<script>
export default {
  methods: {
    goBack () {
      console.log('go back')
    }
  }
}
</script>

2.3. 运行项目, 访问http://localhost:8080/#/PageHeader