上面的代码在实现上之前没见有考虑到通过this.$router.go(-1)回到上一个页面，而是直接采用this.$router.push(path)，这种需要传path的方式，后来看了最前面同事写的方案后借鉴过来，改进了一下。这个代码实现很简单没有什么需要讲的，下面是组件使用的实际例子，当然如果能写个单元测试文件来测试组件更好，但是我Jest只停留在入门水平，平时也就写些最简单的assert，然后过代码覆盖率。
由于代码在处理选项卡时，并没有对额外的插槽extra作处理，所以在使用时需要在对应的标签上模拟一下<el-tabs/>下面的线。这里直接使用了Css-in-js的一种实现styled-components的Vue版vue-styled-components，来实现在JSX中实现类似.vue中样式的scoped功能。但是并不建议用，因为Vue版的没有更新，使用的人也不多，不像React社区那么活跃。
import styled from 'vue-styled-components' import PageHeader from '~/components/pageHeader' const PageHeaderAction = styled.div` border-bottom: 2px solid #e4e7ed; padding-bottom: 6px; ` const UiPageHeader = { name: 'UiPageHeader', components: { PageHeader }, data() { return { tabActive: '01', tabOptions: [ { title: '我的任务', field: '01' }, { title: '我的流程', field: '02' }, { title: '店铺任务', field: '03' }, { title: '店铺流程', field: '04' } ] } }, methods: { onTabChange(tab) { console.log(tab) } }, render(h) { return ( <div> <el-row> <PageHeader title="标题"/> </el-row> <el-row> <PageHeader title="标题 + 默认回退" withPath={true}/> <PageHeader title="标题 + 指定回退路径" withPath={true} path="/4/dashboard"/> </el-row> <el-row> <PageHeader title="标题 + 右边描述" subTitle="我是页面标题描述文字，默认显示在标题右边"/> <PageHeader title="标题 + 下边描述" subTitle="我是页面标题描述文字，指定显示在标题下边" position="bottom"/> <PageHeader title="标题 + 回退 + 右边描述" withPath={true} subTitle="我是页面标题描述文字，默认显示在标题右边" /> <PageHeader title="标题 + 回退 + 下边描述" withPath={true} subTitle="我是页面标题描述文字，指定显示在标题下边" position="bottom" /> </el-row> <el-row> <PageHeader> <template slot="title"> 标题插槽示例 <i/> <strike>Yah!</strike> </template> </PageHeader> <PageHeader title="标题描述插槽示例"> <template slot="subTitle"> 我是页面标题描述文字 <i/> <strike>Yah!</strike> </template> </PageHeader> <PageHeader title="标题栏右则附加操作按钮示例"> <template slot="action"> <el-button type="primary">保存</el-button> </template> </PageHeader> <PageHeader title="标题栏右则附加操作按钮示例2" subTitle="我是页面标题描述文字"> <template slot="action"> <el-button type="text">页面跳转锚点</el-button> </template> </PageHeader> <PageHeader withPath={true} title="标题栏右则附加操作按钮示例3" subTitle="我是页面标题描述文字" position="bottom"> <template slot="action"> <el-button type="primary">保存</el-button> </template> </PageHeader> </el-row> <el-row> <h3>Tab选项卡标题示例</h3> <div>选项卡功能比较单一，只支持Element-ui默认的水平显示</div> <PageHeader withTab={true} activeTab={this.tabActive} options={this.tabOptions} onTabChange={this.onTabChange} /> </el-row> <el-row> <h3>选项卡 + 标题右边附加操作按钮</h3> <PageHeader withTab={true} activeTab={this.tabActive} options={this.tabOptions} onTabChange={this.onTabChange} > <template slot="extra"> <PageHeaderAction> <el-button type="primary" size="small" icon="el-icon-plus" onClick={this.onCreate} > 新建 </el-button> </PageHeaderAction> </template> </PageHeader> </el-row> </div> ) } } export default UiPageHeader
注意：在上面的代码中render()方法中传了个h参考是因为我们的脚手架是公司架构师自己Webpack搞的，如果是用@vue/cli生成的项目是不需要这个参数的。最后：写这个的目的是为了在工作中有所积累，写了几年业务系统，发现并没有留下什么，以文章的方式记录是一种不错的方式，希望能养成好习惯，坚持写作，在写的时候思考提升自我。