0x00 简介
组件 PageHeader 用于用户需要快速理解当前页是什么时。相较于面包屑组件，使用页头组件的页面的路径比较简单。本文将深入分析源码，剖析其实现原理，耐心读完，相信会对您有所帮助。组件源码实现详见packages/page-header/src/main.vue 。 🔗 🔗
更多组件剖析详见 👉 。
0x01 组件源码
template 模板内容
组件模板创建一个class名为el-page-header的<div> 元素根节点，包含两个子节点 左侧标题区域、右侧内容区域。
两个子节点都提供了具名插槽，分发内容时需要指明 slot#name，否则内容会被丢弃。
<template>
<div class="el-page-header">
<div class="el-page-header__left" @click="$emit('back')">
<i class="el-icon-back"></i>
<div class="el-page-header__title">
<slot name="title">{{ title }}</slot>
</div>
</div>
<div class="el-page-header__content">
<slot name="content">{{ content }}</slot>
</div>
</div>
</template>
左侧标题区域
该节点是一个class 名为el-page-header__left的<div> 元素,并添加了click事件监听。
当点击左侧区域后触发click事件，调用内建的 $emit 并传入事件名称back 来触发回调。
该节点区域内包含两个元素节点：
一个名为el-icon-back的Icon图标 。
一个class 名为el-page-header__title的<div> 元素，提供了具名插槽title。
具名插槽title提供后备内容，prop的 title 属性，title 默认值通过国际化方法设置 t('el.pageHeader.title') ，使用中文语言时值为返回。
右侧内容区域
该节点是一个class 名为el-page-header__content的<div> 元素，提供了具名插槽content。具名插槽title提供后备内容，prop的 content 属性。
attributes 属性
组件定义了2 个prop : title、content。
属性title 默认值使用工厂函数调用国际化方法获取翻译文本t('el.pageHeader.title')。
// 引入国际化处理方法
import { t } from 'element-ui/src/locale';
export default {
props: {
title: {
type: String,
default() {
return t('el.pageHeader.title');
}
},
}
};
使用中文语言时值为返回。
// 中文语言包 src\locale\lang\zh-CN.js
export default {
el: {
pageHeader: {
title: '返回'
},
}
};
样式设置
el-page-header el-page-header__left 元素使用 flex 默认布局。
.el-page-header {
display: flex;
}
.el-page-header__left {
display: flex;
}
左侧标题区域el-page-header__left和右侧内容区域el-page-header__content的分隔符通过CSS样式实现，通过设置 左侧标题区域的 伪类 ::after。
.el-page-header__left::after {
content: "";
position: absolute;
width: 1px;
height: 16px;
right: -20px;
top: 50%;
transform: translateY(-50%);
background-color: #dcdfe6;
}
组件渲染效果如下 👇：
0x02 组件样式
组件样式源码 packages\theme-chalk\src\page-header.scss 使用混合指令 b、e 嵌套生成组件样式。
// 生成 .el-page-header
@include b(page-header) {
// ...
// 生成 .el-page-header__left
@include e(left) {
// ...
// 生成 .el-page-header__left::after
&::after {
// ...
}
// 生成 .el-page-header__left .el-icon-back
.el-icon-back {
// ...
}
// 生成 .el-page-header__title
@include e(title) {
// ...
}
}
// 生成 .el-page-header__content
@include e(content) {
// ...
}
}
前文可知使用 gulpfile.js编译 scss 文件转换为CSS,经过浏览器兼容、格式压缩，最后生成 packages\theme-chalk\lib\page-header.scss，内容格式如下。
.el-page-header { /* ... */ }
.el-page-header__left { /* ... */ }
.el-page-header__left::after { /* ... */ }
.el-page-header__left .el-icon-back { /* ... */ }
.el-page-header__title { /* ... */ }
.el-page-header__content { /* ... */ }
0x03 📚参考
