Where were we in the previous chapter? Md-loader is a great way to make markdown syntax easy, concise and flexible.

Let’s pick up where we left off with the element-UI component

layout

El-row and El-Col, as the opening components of this chapter, are mainly used to partition and arrange blocks

Let me tell you how it works. Okay

Row

The Row component is rendered by the render function

return h(this.tag, {
      class: [
        'el-row'.this.justify ! = ='start' ? `is-justify-The ${this.justify}` : ' '.this.align ! = ='top' ? `is-align-The ${this.align}` : ' ',
        { 'el-row--flex': this.type === 'flex'}].style: this.style
    }, this.$slots.default);
Copy the code

Gutter: Defines a style attribute by calculating the gutter property. Returns an object with a negative gutterpx between the left and right sides of the div. The overall width of the div would be width+gutter * 2. Col would also divide extra gutter values

Wrap tag tag: As you can see from the code above, this is used to define the outermost tag type of the Row component

Type: whether to define flex

Justify: Defines the relevant classes for the flex horizontal layout

Align: Defines the relevant class for the flex vertical layout

Col

Col component is rendered using the Render function. This layout component has a lot of styles defined in class. Get the $parent from vue to the gutter of the outer Row component with gutterpx as the left and right inner margins of the Col outermost tag

if (this.gutter) {
      style.paddingLeft = this.gutter / 2 + 'px';
      style.paddingRight = style.paddingLeft;
}
Copy the code

The number of columns occupied by the grid span, the number of gaps to the left of the grid offset, the number of grid moves to the right push, and the number of grid moves to the left pull are defined in the array and added to the outermost Col tag by traversing it as a class attribute

    ['span'.'offset'.'pull'.'push'].forEach(prop= > {
      if (this[prop] || this[prop] === 0) { classList.push( prop ! = ='span'
            ? `el-col-${prop}-The ${this[prop]}`
            : `el-col-The ${this[prop]}`); }});Copy the code

<768px xs, ≥768px sm, ≥992px MD, ≥1200px lg, ≥1920px xl Determine whether it is a value. If it is not a value, go to another set of rules to generate a class. In the end, generate a DOM return based on the props and Row gutter attributes

 ['xs'.'sm'.'md'.'lg'.'xl'].forEach(size= > {
     if (typeof this[size] === 'number') {
       classList.push(`el-col-${size}-The ${this[size]}`);
     } else if (typeof this[size] === 'object') {
       let props = this[size];
       Object.keys(props).forEach(prop= >{ classList.push( prop ! = ='span'
             ? `el-col-${size}-${prop}-${props[prop]}`
             : `el-col-${size}-${props[prop]}`); }); }});return h(this.tag, {
     class: ['el-col', classList],
     style
   }, this.$slots.default);
Copy the code

The container

The container is very simple, so simple that I don’t want to talk about it alone

Container

Use flex to change the reference line of the

label to the Y-axis based on the direction passed by the parent component and whether the component in the default slot has a Header or Footer

isVertical() {
        if (this.direction === 'vertical') {
          return true;
        } else if (this.direction === 'horizontal') {
          return false;
        }
        return this.$slots && this.$slots.default
          ? this.$slots.default.some(vnode= > {
            const tag = vnode.componentOptions && vnode.componentOptions.tag;
            return tag === 'el-header' || tag === 'el-footer';
          })
          : false;
      }
Copy the code

Header, Main, Aside, Footer

The other components don’t have much to offer, but mostly for semantic purposes, use the

,

,