This is the first day of my participation in the August More Text challenge

Background:

When I wrote the component part, I introduced the sans-grid component to the readers. The main content of the book is to introduce the usage scenario of the sans-grid component, because it is element-UI sans-grid component. While introducing the sans-grid component, I also introduced some API usage. In short, the overall content is to stay in the level of use, without further revealing the realization principle of the grid component, on this basis to achieve a, so the purpose of writing this article, the author is to achieve a grid component.

Introduction to Sanger components:

As those of you who have used Bootstrap before will know, bootstrap also comes with a grid layout. Bootstrap provides a “responsive, mobile-first streaming grid system that automatically divides up to 12 columns as the screen or viewport size increases.” Based on this, the Element-UI is divided into 24 columns.

The element-UI grid component lays out the page as rows and columns. For example, in a row, the method of trivializing the rows is to use:

<el-row>
 <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
 <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
 <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
Copy the code

The span is 8, because a row is 24 equal parts, so you have trisection here. The gutter component is very simple to use. There are many apis for the gutter, Flex, etc. Readers can refer to the Elemental-UI documentation for this.

The use of the Sansa component is introduced here, and the following content is mainly described by the author. In this stage, readers can first look at the element-UI document, write a few demo to experience the use of the sansa component.

Analysis of the implementation of Element-UI grid components:

Because the sanitization component is implemented through row and column, code should be analyzed from those two perspectives as well;

  • row:

Row.js defines the row component. Row is a row element that supports gutter. Gutter is passed to the component as the props property on the design:

computed: { style() { const ret = {}; if (this.gutter) { ret.marginLeft = `-${this.gutter / 2}px`; ret.marginRight = ret.marginLeft; } return ret; }}Copy the code

The RET object is passed as a style to the render function last. Notice that row is a syntactic sugar. In Element-UI, div is used by default, so row renders div.

The properties supported by row are defined in props:

  props: {
    tag: {
      type: String,
      default: 'div'
    },
    gutter: Number,
    type: String,
    justify: {
      type: String,
      default: 'start'
    },
    align: String
  },
Copy the code
  • column:

Column is a column element, which has a SPAN attribute. The units XS, sm, MD, LG and XL are defined inside the column as the predefined spacing. The spacing is associated with the CSS attribute, and finally the effect of different spacing is displayed.

This section of the logic implementation of the key code:

    ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
      if (typeof this[size] === 'number') {
        classList.push(`el-col-${size}-${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]}`
          );
        });
      }
    }
Copy the code

The above predetermined parameters are passed as props:

props:{
    xs: [Number, Object],
    sm: [Number, Object],
    md: [Number, Object],
    lg: [Number, Object],
    xl: [Number, Object]
} 
Copy the code

Conclusion:

The row and column component layout is almost complete. I was supposed to finish this article last week, but I put it off. Tonight I just came back from playing basketball and wrote it directly. My recent work at a company has been with components, so my recent articles have been mostly about components.

About me: two years of front-end xiaomei, WeChat: Yingbin192, part-time script dm, welcome to communicate with me, script can, technology can ~