前言
本猿由于公司业务接触到了,面对@花裤衩大大的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进行我这里没有使用。
使用布局样式分离的优点
- 实现布局样式和功能组件样式分离
- 代码可读性增强
- 开发阶段设置布局或布局修改条框清晰
- 通过v-if判断优化页面,实现占位符样式
- 特定插槽与功能组件的参数传递
- 页面功能拓展性增强
- 利于CV 对样式小白极度友好^ ^
使用布局样式分离的缺点
- 目录结构复杂
- 颗粒化高
- 局限性小
- 对于老鸟来说就是多写代码
- 违背程序员懒原则
总结
以上是我的一些关于布局的个人习惯,非教学非指导,新人一枚,分享给四海八荒的奋战在项目的一线同志们。^ ^