3.15 PageHeader 页头

0x00 简介

组件 PageHeader 用于用户需要快速理解当前页是什么时。相较于面包屑组件，使用页头组件的页面的路径比较简单。本文将深入分析源码，剖析其实现原理，耐心读完，相信会对您有所帮助。组件源码实现详见packages/page-header/src/main.vue 。 🔗 组件文档 PageHeader 🔗 gitee源码 main.vue

更多组件剖析详见 👉 📚 Element 2 源码剖析组件总览 。

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 来触发回调。

该节点区域内包含两个元素节点：

1. 一个名为el-icon-back的Icon图标 。

2. 一个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;
}

组件渲染效果如下 👇：

image.png

---

0x02 组件样式

src/page-header.scss

组件样式源码 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) {
    // ...
  }
}

lib/page-header.css

前文可知使用 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 📚参考

“vm-emit”，vuejs.org “伪类 ::after”，MDN