vue小白日记之layout布局组件

6,963 阅读3分钟

前言

本猿由于公司业务接触到了,面对@花裤衩大大的vue-admin-element快速开发平台进行二次开发,源代码布局中大列使用了element-ui,对于我这个刚接触element-ui的小白真的太痛苦TAT !自己萌生了封装布局的想法,实现组件布局,组件功能分离化。

何为布局分离

我们先看下正常使用一般布局代码

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> 

上述代码为我的偶像花裤衩大大的项目示例,可能作为追求布局清爽的我,其实不喜欢这种样式混着功能的组件的html代码(个人感觉)。下面是我的一个我页面布局样式和功能分离。

html
    <layout-main>
      <!-- 左边栏 -->
      <template v-slot:left>
        <brand-info />
      </template>
      <!-- 右边栏 -->
      <template v-slot:right>
        <monitor />
      </template>
    </layout-main>

目录结构

目录结构

布局组件的详细代码

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>

可以看到所有的功能组件都可以通过插槽来占位,包括实现未加载占位,所有的布局样式都在这个组件中进行调整,通过插槽名来确定每个区域的功能实现,还可以传递特定的参数通过slot进行我这里没有使用。

使用布局样式分离的优点

  1. 实现布局样式和功能组件样式分离
  2. 代码可读性增强
  3. 开发阶段设置布局或布局修改条框清晰
  4. 通过v-if判断优化页面,实现占位符样式
  5. 特定插槽与功能组件的参数传递
  6. 页面功能拓展性增强
  7. 利于CV 对样式小白极度友好^ ^

使用布局样式分离的缺点

  1. 目录结构复杂
  2. 颗粒化高
  3. 局限性小
  4. 对于老鸟来说就是多写代码
  5. 违背程序员懒原则

总结

以上是我的一些关于布局的个人习惯,非教学非指导,新人一枚,分享给四海八荒的奋战在项目的一线同志们。^ ^