JrVue是我们基于element重新封装的一套组件库;
为了提高开发效率, 方便对代码的统一管理和维护,
我们提供了一些统一的页面布局, 以及项目常用的中小型模块
我在master新拉一个分支JrVue，来更新JrVue样式文件；
1、页面整体布局
关于页面整体布局, 我们直接借用了饿了么的布局组件<el-header>和<el-main>
相应的样式已经封装到JrVue中, 大家直接使用即可:
...此为页面头部...通常左侧会放一个标题; 右侧是一个按钮组
</el-header>
...此为页面主体部分...
</el-main>
栗子配图:
----------2018-11-17-六---------------start-
补充: 为了避免样式影响, 我在布局里添加了一个非整体布局的类名.inner-layout;
之前页面用<el-header><e-main>布局, 或者需要在页面内部使用<el-header><e-main>的, 可以添加该类
补充作废, 我们布局单加一个类名: jr-layout
----------2018-11-17-六---------------end-
2、页面头部内容
页面头部我们采用饿了么分栏间隔模式, 分左右两栏:
左侧栏el-col必写, 里面el-button按需添加;
右侧栏el-col按需添加;
<el-header>
<strong>页面标题</strong>
</el-col>
</el-col>
</el-row>
</el-header>
栗子配图:
接下来我们看页面主体部分常用模块:
3、页面搜索栏
搜索栏这一行样式, 参考配图, 我们做了2:1:1分栏;
代码斜体部分为el-icon-group写法（即配图右侧的小图标样式）, 我在JrVue主题定制做了更新, 再此不再赘述;
</el-col>
</el-col>
</el-tooltip>
<span></span>
</el-tooltip>
</span>
</el-col>
</el-row>
例子配图:
4、页面筛选栏
配图第一行代码:
<el-row>
<strong>机构类型</strong>
</el-checkbox-group>
</el-col>
</el-row>
配图第二行代码(仅仅比第一行多一个类名border):
<el-row>
<strong>机构类型</strong>
</el-checkbox-group>
</el-col>
</el-row>
配图第三行代码:
<el-row>
</el-col>
</el-row>
配图第四行代码略;
栗子配图:
该筛选样式虽然简单, 但是在筛选项太多时, 折行样式会有问题;
如果必要, 在下一版我们会出一个兼容折行的方案...
title all [groups]
-------2018-11-21---新一版在内部封装了该样式, 代码内容不变, 解决了以上问题-----start---end-
-------2018-12-07--------start-
这一版本我们添加了多行筛选的样式布局:
该布局有两个<el-row>标签;
第一个el-row.jr-checkbox-group用来放置筛选栏内容
第二个el-row.controls-row用来放置控制按钮
通过点击筛选按钮添加类.show-two-line来实现高度切换
代码栗子如下:
<!--:lg表示大屏时分两行显示, 小屏时单行显示-->
<strong>{{'label'}}</strong><el-checkbox-button>...</el-checkbox-button>
</el-checkbox-group>
</el-col>
<strong>{{'label'}}</strong><el-checkbox-button>...</el-checkbox-button>
</el-checkbox-group>
</el-col>
<el-col>
<strong>{{'label'}}</strong><el-checkbox-button>...</el-checkbox-button>
</el-checkbox-group>
</el-col>
</el-row>
<el-col>
<el-button
>{{showSearchFlag === false ? $t('advancedScreening') : $t('lowLevelScreening')}}</el-button>
</el-col>
</el-row>
栗子配图1. 初始状态:
栗子配图2. 展开状态:
-------2018-12-07-----end-
5、tab标签页
标签页我们直接采用饿了么组件, 直接上码:
tab标签页1
这个第三方机构编辑页面的tab子页的栗子:
实现添加按钮只在联系人tab页显示:
status === 'edit' 表示只在编辑页面渲染;
实现只在联系人tab页显示:
>
</el-tooltip>
</span>
<el-form>...</el-form>
</el-tab-pane>
<jr-dynamic-query-table></jr-dynamic-query-table>
</el-tab-pane>
</el-tabs>
栗子配图:
注: table里面的按钮, size用'mini', 页面的按钮size用'small'
栗子:
<el-button
onClick={e => this.handleApproval(row)}
>'审批</el-button>
tab标签页2
.jr-tab-box盒子里套了.jr-tab-header 和 .jr-tab-main
.jr-tab-header里面用的是饿了么radio组件
栗子:
</el-radio-group>
</div>
...content
</div>
</div>
栗子配图:
6、久蓉icon
7、表单页面流式布局
栗子:
<el-form>
<el-form-item>...</el-form-item>
</el-col>
<el-form-item>...</el-form-item>
</el-col>
</el-row>
</el-form>
栗子配图:
8、table
table右侧操作的icon代码:
栗子1-1:
中间<i></i>默认显示一个竖杠分隔符(占10像素宽,可叠加)
<span>
<i></i>
</span>
栗子1-1配图:
8、table高度/弹窗/上传组件
上传组件
栗子:
<el-row>
<p>{{$t('fields.scanFiles')}}</p>
<jr-upload-file
></jr-upload-file>
</el-col>
</el-row>
栗子配图:
下一步我们会优先整理弹窗样式...
@------------------------------
开发工程: staice-view;
测试分支: mfront 7.1theme
栗子分支: mfront->第三方机构
ziChin
tim
@-------------------------------