在 Vue 2 中,Element UI 并没有一个直接命名为 PageHeader
的组件。然而,你可能是在寻找一种方式来创建自定义的页头(Page Header),这通常是通过组合 Element UI 的其他组件(如 el-header
、el-row
、el-col
、el-title
等)来实现的。
但在 Vue 3 的 Element Plus 中,确实有一个 el-page-header
组件,用于展示页面的页头信息。下面我将分别介绍如何在 Vue 2 和 Vue 3 中实现类似的功能,并特别关注 Vue 3 中 el-page-header
组件的属性、事件和方法。
Vue 2 + 自定义页头
在 Vue 2 中,你可以使用 Element UI 的基础组件来构建自定义的页头。
示例
<template>
<el-header>
<el-row>
<el-col :span="24">
<h1>页面标题</h1>
<div>页面描述或副标题</div>
</el-col>
</el-row>
</el-header>
</template>
<script>
export default {
// ...
};
</script>
在这个例子中,我们使用了