Implementation of Element-ui Layout (Row and Col components)

When we encounter some layouts in actual development, we will use Layout. This layout can achieve a good layout effect and even be responsive as long as some parameters are configured. How is it implemented specifically? Let us dissect the source code of Element-UI and learn some details in it.

Basic instructions and usage

Element-UI's Layout is based on 24 basic columns, allowing you to create layouts quickly and easily. Depending on the combination, a very beautiful responsive layout can be generated quickly. The specific usage is as follows:

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

From the above sample code, we can see that the Row component is mainly used to create the layout of each row column, such as some spacing and alignment between them. Col creates each column, including its length, offset, etc. We can freely combine each column to achieve a responsive effect.

Analysis of Row Components

Render Function

We all know that in addition to using template templates to write components in Vue, sometimes we can also directly use the render function to write a component. Because the template is eventually compiled into a render function.
Why is there a render function? For example, there is a requirement now: when generating titles with font sizes from h1 to h6 according to dynamic levels, if we use template to implement it, there may be a lot of pseudo codes like this in our page:

<template>
   <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</template>

But if you use the render function it is relatively simple:

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level, // tag name this.$slots.default // child node array)
  },
  props: {
    level:
      type: Number,
      required: true
    }
  }
})

There is another code optimization point here. this.$slots.default stores the slot content and does not need to be written so many times.

Source code analysis

The source code of the Row component is relatively simple. Because we can specify a rendering tag for it through the tag prop, the component is written directly using the render function. The render function is as follows:

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

From the above source code, we can conclude that Row mainly controls the class name to control the content layout. There are gutter properties that control the number of gaps between columns within a row. If we set gutter=20, then each column item will have a left and right spacing of 10px, then there will be a problem: there will be left and right spacing between the first column item and the last column item. So how can we remove the 10px gap between the first and last one? The solution for Row is to offset the row by -10px on each side, so a calculated property is used to set the style:

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

Analysis of Col components

Component Analysis

Col is mainly used to set the length and offset of each column. The main attributes are span and offset. This component is also written using the render function. First, let's see how to control the column through span and offset. The source code is as follows:

render(h) {
    let classList = [];
    let style = {};
    ...

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

    ...

    return h(this.tag, {
      class: ['el-col', classList],
      style
    }, this.$slots.default);
  }

From this we can see that the column width of col is controlled by different class names. We found the corresponding .scss file and discovered that it used the sass@for loop statement to calculate the width of different grids:

@for $i from 0 through 24 {
  .el-col-#{$i} {
    width: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-offset-#{$i} {
    margin-left: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-pull-#{$i} {
    position: relative;
    right: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-push-#{$i} {
    position: relative;
    left: (1 / 24 * $i * 100) * 1%;
  }
}

Similarly, offset uses the same logic. In this way, we can combine different styles of layout according to different spans and offsets. Doesn’t it feel that the logic behind it is so simple? Let's think about another question: if we want to control a group of identical column width intervals, do we need to set them one by one? The answer is no, we can use the gutter property in the above-mentioned Row component to make unified settings. So how is this achieved? The source code is as follows:

 computed: {
    gutter() {
      let parent = this.$parent;
      while (parent && parent.$options.componentName !== 'ElRow') {
        parent = parent.$parent;
      }
      return parent ? parent.gutter : 0;
    }
  }

We traverse the parent component upwards. If the parent component's component name is ElRow, we get the gutter value and then set the corresponding values ​​for the component's left and right margins:

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

In this way, we have solved the problem of setting uniform column width;

Responsive layout

Here we use media queries in CSS3 to perform responsive layout, and the corresponding sizes are xs, sm, md, lg and xl. The usage code is as follows:

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

Description: xs: <768px responsive grid number or grid property object, sm: ≥768px responsive grid number or grid property object, md: ≥992px responsive grid number or grid property object, lg: ≥1200px responsive grid number or grid property object, xl: ≥1920px responsive grid number or grid property object.

The logic behind this is that the number of grids displayed on different screen sizes is different, and it is responsive according to the screen width. First, let's see how to perform different class bindings:

['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]}`
          );
        });
      }
    });

Here, attributes such as xs can also use objects. Therefore, there will be a logic for processing objects; the above js processing logic is relatively simple. Let’s take a look at how CSS handles the logic of this media query.
When analyzing CSS, we first understand a concept, that is, the built-in method map-get in Sass. The function of map-get($map,$key) is to get the corresponding value through $key, which can be understood as a mapping relationship. If it does not exist, the corresponding css will not be compiled. For example:

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}
// After compilation.btn-dribble {
  color: #3b5998;
}

The second is the Sass built-in method inspect(value), which returns a string representation, and value is a Sass expression. For example:

$--sm:768px !default;
$--md:992px !default;
$--lg:1200px !default;
$--xl:1920px !default;

$--breakpoints: (
  'xs' : (max-width: $--sm - 1),
  'sm' : (min-width: $--sm),
  'md' : (min-width: $--md),
  'lg' : (min-width: $--lg),
  'xl' : (min-width: $--xl)
);
@mixin res($breakpoint){
  $query:map-get($--breakpoints,$breakpoint)
  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is 
    defined in `$breakpoints` map.';
  }
  @media #{inspect($query)}
   {
    @content;
   }
}
.element {
  color: #000;
 
  @include res(sm) {
    color: #333;
  }
}
// Compiled css

.element {
  color: #000;
}
@media (min-width: 768px) {
  .element {
    color: #333;
  }
}

OK, I believe you have mastered these two methods well, so let's see how element is implemented.
In fact, the second example above has already said something. Let's take a look at the source code:

$--sm:768px !default;
$--md:992px !default;
$--lg:1200px !default;
$--xl:1920px !default;

$--breakpoints: (
  'xs' : (max-width: $--sm - 1),
  'sm' : (min-width: $--sm),
  'md' : (min-width: $--md),
  'lg' : (min-width: $--lg),
  'xl' : (min-width: $--xl)
);
/* Break-points
 -------------------------- */
@mixin res($key, $map: $--breakpoints) {
  // Loop breakpoint Map, return if it exists @if map-has-key($map, $key) {
    @media only screen and #{inspect(map-get($map, $key))} {
      @content;
    }
  } @else {
    @warn "Undefeined points: `#{$map}`";
  }
}
@include res(xs) {
  @for $i from 0 through 24 {
    .el-col-xs-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .el-col-xs-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }
  }
}
@include res(sm) {
  ...
}
@include res(md) {
  ...
}
@include res(lg) {
  ...
}
@include res(xl) {
  ...
}

In this way, we will display different lengths and intervals on different screen sizes. Isn’t it great to write our media queries in this way?

This concludes this article on the implementation of Element-ui Layout (Row and Col components). For more relevant Element Layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!