Grid layout

What is a grid layout?

Divide a div into N parts (N = 12,16,24…) , each part has no gap or gap.

Production prototype:

A row is divided into 24 parts. You can use span to specify how many parts

Increase the gutter:

There is a gap between each column, but no gap between the two sides

Implementation ideas:

  1. The column will set the Padding to the gutter / 2, so that the space between the two columns will be the gutter
  2. Parent row sets negative Margin with a value of -gutter / 2

How do we pass the gutter parameter from row to col?

When a user uses a UI, they write:

<m-row gutter="2">
			<m-col>1</m-col>
			<m-col>2</m-col>
			<m-col>3</m-col>
</m-row>
Copy the code

This way, only the Row component can get the gutter value, not the COL.

How to do? How do I get row to secretly pass values to col? Use the Mounted hook function!

The sequence in which hook functions are executed in parent and child components

The created() hook means to generate an object in memory, similar to const div = document.createElement(‘div’).

Mounted () this hook said the object mounted on a page, similar to the document. The body. The appendChild (div)

Let’s examine the created and Mounted order of the parent component ROW and the child col:

Type log in each hook function to get:

So, the order is, first create the father in memory, then create the son in memory, then hang the son on the father, then hang the father on the body

So we can take advantage of this feature by finding the son in the parent component’s Mounted function and passing the data to him

row.vue

mounted() {
      this.$children.forEach((vm) = >{
        vm.$data.gutter = this.gutter
			})
    }
Copy the code

Implementation response

Goal: To achieve different layouts with different page widths

This is done by passing in a phone object that overrides the existing span and offset

<div>
			<m-row gutter="20">
				<m-col span="4" offset="2" :phone="{span:12, offset:4}">1</m-col>
				<m-col span="20" offset="2" :phone="{span:12, offset:4}">2</m-col>
			</m-row>
</div>
Copy the code

We need to determine whether the object passed in is a subset of {span: XXX, offset: XXX}

@Prop({
      validator(value: Record<string, number | string>) {
        const keys = Object.keys(value);
        let valid = true;
        keys.forEach(key= > {
          if(! ['span'.'offset'].includes(key)) {
            valid = false; }});return valid;
      }
    }) phone: Record<string, number | string> | undefined;
Copy the code

This article is the original article of FJL, the copyright belongs to myself and hungry people valley all, reprint must indicate the source