在后台管理系统的日常开发过程中发现对于同一个业务下面的版块不同的开发同事每次都会重复写页面标题的样式，而且不同的页面标题还不太一样。虽然有的页面标题栏承载的元素不一样，但是也有通用的部分，经过多个项目的迭代慢慢地总结与积累完善出了一个通用的页面标题组件<PageHeader/>。
下面是一个最常见的标题设计原型：
下面是同事给出的封装方案:
使用方式<router-back text="详情" />
组件封装代码片段<template> <div> <a href="javascript:void(0)" :title="title" size="15px" @click="back" v-if="!disableRoute" ></a> <span v-show="text.length > 0 && !disableRoute" ></span> <span>{{ text }}</span> </div> </template> <script> export default { name: 'router-back', props: { text: { type: String, default: _ => '' }, url: { type: [String, Number], default: _ => -1 }, title: { type: String, default: _ => '返回' }, disableRoute: { type: Boolean, default: _ => false } }, methods: { back () { if (typeof this.url === 'number') return this.$router.go(this.url) return this.$router.push(this.url) } } } </script>
无对比就没有伤害，这个封装只是争对了单一的情况，并没有任何扩展性和灵性性，而且在组件方法名称和接收的属性上有待考究。所以我果断弃用这个组件，而选择自己的解决方案，虽然也不是很完美，代码质量上相比也没有什么大的改进，但是自我认为还是可以分享一下。
不多废话，先看实际效果图：
注意：截图是在Chrome中缩小后截下的，并不是默认大小。
整个组件是通过Vue组件JSX方式写法来实现的，我的代码质量一般，实现上不一定是最佳的，但是我有点纳闷我一个同事总是说我的多套了一些标签，说：pageHeader还需要优化，减少标签嵌套。下面是实现代码：
import './pageHeader.scss' const PageHeader = { name: 'PageHeader', props: { // 标题 title: String, // 子标题 subTitle: String, // 返回路径，不适用于带选项卡标题 path: { type: [String, Number], default: -1 }, // 是否显示回退按钮 withPath: { type: Boolean, default: false }, // 子标题显示位置 'right' | 'bottom', 不适用于带选项卡标题 position: { type: String, default: 'right' }, // 带选项卡标题开关 withTab: { type: Boolean, default: false }, // 选项卡是否引起路由改变 isRoute: { type: Boolean, default: false }, // 当前激活选项卡 activeTab: { type: String, default: '' }, // 选项卡数据 options: { type: Array, default() { return [ { title: '', field: '', path: '' } ] } } }, computed: { isBottom() { return this.position === 'bottom' }, curTab: { get: function() { return this.activeTab }, set: function(val) { if (this.activeTab !== val) { if (this.isRoute) { this.options.forEach(option => { if (option.field === tab) { this.$router.push(option.path) this.$emit('tabChange', val) } }) } else { this.$emit('tabChange', val) } } } } }, methods: { goBack() { typeof this.path === 'string' ? this.$router.push(this.path) : this.$router.go(this.path) } }, render(h) { const Back = ( <div> <el-button type="text" icon="el-icon-back" onClick={this.goBack} /> <span /> </div> ) const Header = ( <div> <div> {this.withPath && Back} <div> {(this.title || this.$slots.title) && ( <div class={`page-header-title__main ${this.isBottom ? '' : 'fl'}`} > {this.$slots.title ? this.$slots.title : this.title} </div> )} {(this.subTitle || this.$slots.subTitle) && ( <div class={`page-header-title__sub ${ this.isBottom ? 'lh__14' : 'fl ml__s' }`} > {this.$slots.subTitle ? this.$slots.subTitle : this.subTitle} </div> )} </div> </div> {this.$slots.action && ( <div class={`page-header__aside ${this.isBottom ? 'lh__72' : ''}`}> {this.$slots.action} </div> )} </div> ) const TabHeader = ( <div> <div> <el-tabs v-model={this.curTab}> {this.options.map(option => ( <el-tab-pane label={option.title} name={option.field} /> ))} </el-tabs> </div> {this.$slots.extra && ( <div>{this.$slots.extra}</div> )} </div> ) return ( <div class={`page-header ${this.isBottom ? 'pt__20' : 'py__20'}`}> {this.withTab ? TabHeader : Header} </div> ) } } export default PageHeader