Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to realize the layout of Element-ui Layout, which is very detailed and has certain reference value. Friends who are interested must finish it!

Basic instructions and usage

Element-UI 's Layout layout is a quick and easy way to create a layout through the basic 24 columns. According to different combinations, a very beautiful and responsive layout can be generated very quickly. The specific usage is as follows:

From the sample code above, you can see that the main purpose of the Row component is to create the layout of each row and column, such as some spacing, alignment, and so on. Col creates each column, its length, offset, and so on. We can freely combine each column to achieve a responsive effect.

Analysis render function of Row component

We all know that in addition to writing components using template templates in vue, sometimes we can also write a component directly using the render function. Because the template template is eventually compiled into a render function.

Why is there a way to write render function? For example, there is a requirement: when generating headings from h2-h7 fonts based on dynamic level, if we use template to implement it, there may be a lot of pseudo code like this on our page:

However, it is relatively simple to use the render function:

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 also a code optimization point here. This.$slots.default stores the contents of the slot 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 assign a rendering tag to it through the tag prop, so the component is written directly using the render rendering function. The render function section 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) }

As can be concluded from the above source code, Row mainly controls the class name to control the layout of the content. There is a gutter attribute that controls the number of intervals between columns in a row. If we set it to gutter=20 and each column item is spaced left and right 10px, then there will be a problem: there will be a left and right spacing between the first column item and the last column item. So how to get the 10px removed between the first and the last left and right? Row's solution is that the line is skewed to the left and right by-10px, so a calculation 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;}}, Col component analysis

The main purpose of Col is to set the length and offset of each column. The main attributes are span and offset;. Similarly, this component is also written with the render function. First of all, 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 found that he used the sass@for loop statement to calculate the width of different grids:

@ for $I from 0 through 24 {.el-col-# {width: (1 / 24 * $I * 100) * 1%;} .el-col-offset-# {$I} {margin-left: (1 / 24 * $I * 100) * 1%; .el-col-pull-# {position: (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 mix and combine different wind layouts according to different span and offset. Does it feel that the logic behind it is so simple? Let's think about another question, that is, if we want to control the same set of column width intervals, do we need to set them one by one? The answer is no, we can use the gutter property in the Row component above to make a uniform setting. So how did it happen? 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;}}

By iterating through the parent component up, if the component name of the parent component is ElRow, take the guter value, and then let the component set the corresponding value to the left and right inner margin:

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

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

Responsive layout

Here we use the media query in css3 for responsive layout, and the corresponding sizes are xs, sm, md, lg and xl. The usage code is as follows:

Description: xs: {if (typeof this [size] = 'number') {classList.push (`el-col-$ {size}-${thisSize} `);} 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]}`);})

Properties such as xs can also be used as objects. So there will be a logic for dealing with objects; the logic for the above js processing is relatively simple, so let's take a look at how css handles this media query logic.

When analyzing css, let's first understand the concept of map-get, the built-in method in sass. The function of the map-get ($map,$key) function 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 is a representation that returns a string, and value is an 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;}

Well, I believe that smart you have mastered these two methods very well, so let's take a look at how element is implemented.

In fact, the second example above has already given one or two examples. 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) {/ / cycle breakpoint Map, return @ if map-has-key ($map, $key) {@ media only screen and # {inspect (map-get ($map, $key))} {@ content if present } @ else {@ warn "Undefeined points: `# {$map}`;} @ include res (xs) {@ for $I from 0 through 24 {.el-col-xs-# {width: (1 / 24 * $I * 100) * 1%; .el-col-xs-offset-# {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 under different screen sizes. Wouldn't it be great to write our media queries?

The above is all the content of this article "how to achieve Element-ui Layout layout". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.