1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 PageHeader：
在你的 Vue 组件中导入 PageHeader，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-page-header :content="headerContent">
<!-- 可以在这里添加其他页面内容 -->
</el-page-header>
</div>
</template>
<script>
import { ElPageHeader } from 'element-plus';
export default {
components: {
ElPageHeader,
},
data() {
return {
headerContent: {
title: '页面标题',
content: '页面描述信息',
// 可以添加更多配置项，比如面包屑和操作按钮
},
};
},
};
</script>
上述代码中，我们导入了 ElPageHeader 组件，并在模板中使用它，通过 content 属性传递了页面头部的内容，包括标题和描述信息。
3. 自定义 PageHeader：
你可以根据需要自定义 PageHeader，例如，添加面包屑导航和操作按钮：
<template>
<div>
<el-page-header :content="headerContent">
<!-- 可以在这里添加其他页面内容 -->
</el-page-header>
</div>
</template>
<script>
import { ElPageHeader, ElBreadcrumb } from 'element-plus';
export default {
components: {
ElPageHeader,
ElBreadcrumb,
},
data() {
return {
headerContent: {
title: '页面标题',
content: '页面描述信息',
breadcrumb: {
routes: [
{ path: '/', breadcrumbName: '首页' },
{ path: '/example', breadcrumbName: '示例页' },
{ path: '/example/page', breadcrumbName: '页面' },
],
},
// 可以添加更多配置项，比如操作按钮等
},
};
},
};
</script>
在这个例子中，我们通过在 headerContent 中添加 breadcrumb 配置来定义面包屑导航。你可以根据需要调整和扩展配置项，以满足具体的页面头部需求。
转载请注明出处：http://www.zyzy.cn/article/detail/5571/ElementPlus