This is the 18th day of my participation in the August Challenge

0 x00 profile

The PageHeader component is used when the user needs to quickly understand what the current page is. The path of a page using a header component is simpler than a breadcrumb component. This article will in-depth analysis of the source code, analysis of its implementation principle, patience to read, I believe will help you. See Packages/Page-header/SRC /main.vue for the component source code. 🔗 component documentation PageHeader 🔗 gitee source main.vue

For more component profiling see 👉 📚 Element 2 source profiling Component Overview.

0x01 Component source code

Template Template content

The component template creates a

element root node with a class name of el-Page-header that contains the title area to the left and the content area to the right of the two child nodes.

Both child nodes provide named slots. Slot# name must be specified when distributing content, otherwise the content will be discarded.

<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>
Copy the code

Left heading area

This node is a

element with a class name of el-page-header__left and adds a click event listener. When the click event is triggered after clicking on the left side of the field, invoke the built-in $emit and pass in the event name back to trigger the callback.

The node area contains two element nodes:

  1. A group calledel-icon-backIcon Icon.
  2. A class namedel-page-header__titlethe<div>Element that provides a named slottitle.

Name slot title provides backup content, prop title property, title default value via internationalization method set t(‘ el.pageheader. title’), when using Chinese value is returned.

Right content area

This node is a

element with a class name of el-page-header__content, providing a named slot content. Named slot title provides backup content, the content property of prop.

The attributes property

The component defines two prop: Title and Content.

The default value of the title property uses the factory function to call the internationalization method to get the translated text T (‘ el.pageheader.title ‘).

// Introduce internationalization processing
import { t } from 'element-ui/src/locale';
export default { 
  props: {
    title: {
      type: String.default() {
        return t('el.pageHeader.title'); }}}};Copy the code

The value is returned when Chinese is used.

// Chinese language package SRC \locale\lang\ zh-cn.js
export default {
  el: { 
    pageHeader: {
      title: 'return'}}};Copy the code

The style is set

El-page-header el-Page-header__left elements use the flex default layout.

.el-page-header { 
  display: flex; 
}
.el-page-header__left { 
  display: flex; 
}
Copy the code

The delimiters for the left heading area el-Page-header__left and the right content area el-Page-header__content are implemented with CSS styles by setting the pseudo-class ::after for the left heading area.

.el-page-header__left::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 16px;
  right: -20px;
  top: 50%; 
  transform: translateY(-50%);
  background-color: #dcdfe6;
}
Copy the code

Component rendering looks like 👇 :

0x02 Component Style

src/page-header.scss

SCSS uses mixed instructions B and E to generate component styles.

/ / generated. El - page - the header
@include b(page-header) {
  // ...
  
  / / generated. El - page - header__left
  @include e(left) {
    // ...
    
    / / generated. El - page - header__left: : after
    &::after {
      // ...
    }
    
    // generate.el-page-header__left. El-icon-back
    .el-icon-back {
      // ...
    }
    
    / / generated. El - page - header__title
    @include e(title) {
      // ...}}/ / generated. El - page - header__content
  @include e(content) {
    // ...}}Copy the code

lib/page-header.css

Gulpfile. js is used to compile the SCSS file and convert it to CSS. After browser compatibility and format compression, packages\theme-chalk\lib\page-header. SCSS is generated.

.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 { /* ...  */ } 
Copy the code

0 x03 📚 reference

“Vm-emit”, vuejs.org “Pseudo-class ::after”, MDN

0x04 Attention column

This article has been included in the column 👇, you can directly follow.