preface

This ape due to the company business contact, in the face of @flower panties big VUe-admin – Element rapid development platform for secondary development, the source code layout column used element- UI, for me this just contact element- UI small white really too painful TAT! I came up with the idea of packaging layout to achieve component layout and component function separation.

What is layout separation

Let’s first look at normal use of general layout code

html
   <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <el-col
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 12 }"
        :xl="{ span: 12 }"
        style="padding-right:8px; margin-bottom:30px;"
      >
        <transaction-table />
      </el-col>
      <el-col
        :xs="{ span: 24 }"
        :sm="{ span: 12 }"
        :md="{ span: 12 }"
        :lg="{ span: 6 }"
        :xl="{ span: 6 }"
        style="margin-bottom:30px;"
      >
        <todo-list />
      </el-col>
      <el-col
        :xs="{ span: 24 }"
        :sm="{ span: 12 }"
        :md="{ span: 12 }"
        :lg="{ span: 6 }"
        :xl="{ span: 6 }"
        style="margin-bottom:30px;"
      >
        <box-card />
      </el-col>
    </el-row> 
Copy the code

The above code for my idol flower pants big project example, may be as the pursuit of a clean layout I actually do not like this style mixed with functional components of the HTML code (personal feeling). Here is one of my page layout styles and feature separation.

html <layout-main> <! <template v-slot:left> <brand-info /> </template> <! <template v-slot:right> <monitor /> </template> </layout-main>Copy the code

The directory structure

Detailed code for layout components

html
<template>
  <div class="icon-page">
    <div class="icon-wrapper">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6"
          ><div class="grid-content bg-purple" name="icon-left-info">
            <slot name="left"></slot></div
        ></el-col>

        <el-col :span="17"
          ><div class="grid-content bg-purple" name="icon-right-info">
            <slot name="right"></slot></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

Copy the code

As you can see, all of the functional components can be placeholder by slot, including the implementation of unloaded placeholder, all of the layout styles are adjusted in this component, the slot name determines the functionality of each area, and you can pass specific parameters through slot that I don’t use here.

Use the advantages of separation of layout styles

  1. Implement separation of layout styles from functional component styles
  2. Code readability enhancement
  3. Development stage layout Settings or layout modification bar clear
  4. Optimize the page by v-IF judgment to achieve placeholder style
  5. Parameter passing between a specific slot and a functional component
  6. Page function expansion enhancement
  7. Benefit CV to style small white extremely friendly ^ ^

Disadvantages of using layout style separation

  1. Complex directory structure
  2. Granular high
  3. Limitation of small
  4. For old birds, it’s code
  5. Violate the lazy programmer principle

conclusion

The above are some of my personal habits about layout, which are not teaching but not guiding. I would like to share a new one with the comrades fighting in the front line of the project. ^ ^