JrVue是我們基于element重新封裝的一套組件庫;?

為了提高開發效率,?方便對代碼的統一管理和維護,?

我們提供了一些統一的頁面布局,?以及項目常用的中小型模塊

我在master新拉一個分支JrVue，來更新JrVue樣式文件；

1、頁面整體布局?

關于頁面整體布局,?我們直接借用了餓了么的布局組件<el-header>和<el-main>

相應的樣式已經封裝到JrVue中,?大家直接使用即可:

<el-header?class="jr-layout">

????...此為頁面頭部...通常左側會放一個標題;?右側是一個按鈕組

</el-header>

<el-main?class="jr-layout">

????...此為頁面主體部分...

</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>????

????<el-row?:gutter="10">

????????<el-col?:span="12">

????????????<el-button?v-if="'是否顯示返回按鈕'"?circle?icon="jr-icon-back"></el-button>

????????????<strong>頁面標題</strong>

????????</el-col>

????????<el-col?:span="12"?style="text-align:right"?v-if="'是否顯示取消確認按鈕'">

????????????<el-button?size="small"?border-btn>取消</el-button>

????????????<el-button?size="small"?type="primary">確定</el-button>

????????</el-col>

????</el-row>

</el-header>

栗子配圖:

接下來我們看頁面主體部分常用模塊:

3、頁面搜索欄

搜索欄這一行樣式,?參考配圖,?我們做了2:1:1分欄;

代碼斜體部分為el-icon-group寫法（即配圖右側的小圖標樣式）,?我在JrVue主題定制做了更新,?再此不再贅述;

<el-row?:gutter="10">

???<el-col?:span="12">

??????<el-input?size="small"?placeholder="請輸入機構名稱"?prefix-icon="el-icon-search"></el-input>

???</el-col>

???<el-col?:span="6">

??????<el-button?@click="search"?type="primary"?size="small">搜索</el-button>

???</el-col>

???<el-col?:span="6"?style="text-align:?right">

?????????<span?class="el-icon-group">

????????????<el-tooltip?class="item"?effect="dark"?content="添加"?placement="bottom">

???????????????<i?class="jr-icon-plus"?@click="startAdd"?></i>

????????????</el-tooltip>

????????????<span></span>

????????????<el-tooltip?class="item"?effect="dark"?content="刪除"?placement="bottom">

???????????????<i?class="jr-icon-delete"?@click="deleteAll"></i>

????????????</el-tooltip>

?????????</span>

???</el-col>

</el-row>

?

例子配圖:

4、頁面篩選欄

配圖第一行代碼:

<el-row>

???<el-col?:xs="24"?:sm="24">

??????<el-checkbox-group?v-model="types"?:xs="24"?:sm="12"?@change="searchByTypes">

?????????<strong>機構類型</strong>

?????????<el-checkbox-button?v-for="orgType?in?orgTypes"?:label="orgType.item"?:key="orgType.item">{{orgType.item}}</el-checkbox-button>

??????</el-checkbox-group>

????</el-col>

</el-row>

?

配圖第二行代碼(僅僅比第一行多一個類名border):

<el-row>

???<el-col?:xs="24"?:sm="24">

??????<el-checkbox-group?v-model="types"?:xs="24"?:sm="12"?@change="searchByTypes"?class="border">

?????????<strong>機構類型</strong>

?????????<el-checkbox-button?v-for="orgType?in?orgTypes"?:label="orgType.item"?:key="orgType.item">{{orgType.item}}</el-checkbox-button>

??????</el-checkbox-group>

????</el-col>

</el-row>

?

配圖第三行代碼:

<el-row>

???<el-col?:xs="24"?:sm="24">

??????<el-checkbox-group?class="border">...</el-checkbox-group>

??????<el-checkbox-group?class="border">...</el-checkbox-group>

??????<el-checkbox-group?class="border">...</el-checkbox-group>

???</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來實現高度切換

代碼栗子如下:?

<el-row?style="margin-top:?20px"?class="jr-checkbox-group"?:class="showSearchFlag???''?:?'show-two-line'">

????<el-col?:xs="24"?:sm="24"?:md="24"?:lg="12">?<!--:lg表示大屏時分兩行顯示,?小屏時單行顯示-->

??????<el-checkbox-group?v-model=""?class="border">

?????????<strong>{{'label'}}</strong><el-checkbox-button>...</el-checkbox-button>

??????</el-checkbox-group>

???</el-col>

???<el-col?:xs="24"?:sm="24"?:md="24"?:lg="12">

???????<el-checkbox-group?v-model=""?class="border">

?????????<strong>{{'label'}}</strong><el-checkbox-button>...</el-checkbox-button>

???????</el-checkbox-group>

???</el-col>

???<el-col>

??????<el-checkbox-group?v-model=""?class="border">

?????????<strong>{{'label'}}</strong><el-checkbox-button>...</el-checkbox-button>

??????</el-checkbox-group>

???</el-col>

</el-row>

<el-row?class="controls-row">

???<el-col>

??????<el-button?size="small"?type="text"?@click="clearInput"?class="border">{{$t('clear')}}</el-button>

??????<el-button

?????????size="small"

?????????type="text"

?????????@click="showSearchFlag?=?!showSearchFlag"

?????????class="border"

??????>{{showSearchFlag?===?false???$t('advancedScreening')?:?$t('lowLevelScreening')}}</el-button>

???</el-col>

</el-row>

栗子配圖1.?初始狀態:

栗子配圖2.?展開狀態:

?

?

-------2018-12-07-----end-

?

?

5、tab標簽頁

標簽頁我們直接采用餓了么組件,?直接上碼:

tab標簽頁1

這個第三方機構編輯頁面的tab子頁的栗子:?

1.斜體span標簽內容是右側icon代碼;?我們通過簡單的一行v-if="status?===?'edit'?&&?curTabIndex?===?'1'"實現添加按鈕只在聯系人tab頁顯示:

2.其中status?===?'edit'?表示只在編輯頁面渲染;?

3.自定義變量curTabIndex?===?'1'配合@tab-click="handleClick"實現只在聯系人tab頁顯示:

<span?class="el-icon-group"?v-if="status?===?'edit'?&&?curTabIndex?===?'1'">

????<el-tooltip?class="item"?effect="dark"?content="添加"?placement="bottom">

?????????<i?class="el-icon-plus"?@click="changeTure"?></i>

???</el-tooltip>

</span>

<el-tabs?v-if="status?===?'edit'"?v-model="activeName"?@tab-click="handleClick">

???<el-tab-pane?label="基本信息"?name="first">

?????????<el-form>...</el-form>

???</el-tab-pane>

???<el-tab-pane?:label="contactName"?name="second">

?????????<jr-dynamic-query-table></jr-dynamic-query-table>

???</el-tab-pane>

</el-tabs>

栗子配圖:

注:?table里面的按鈕,?size用'mini',?頁面的按鈕size用'small'

栗子:?

<el-button

??type="primary"

??size="mini"

??onClick={e?=>?this.handleApproval(row)}

>'審批</el-button>

?

tab標簽頁2

.jr-tab-box盒子里套了.jr-tab-header?和?.jr-tab-main

.jr-tab-header里面用的是餓了么radio組件

栗子:

<div?class="jr-tab-box">

???<div?class="jr-tab-header">

??????<el-radio-group?v-model="tabPosition"?size="mini"?@change="changeJrTabs">

?????????<el-radio-button?label="left">基本情況</el-radio-button>

?????????<el-radio-button?label="right">投資情況</el-radio-button>

??????</el-radio-group>

???</div>

???<div?class="jr-tab-main">

???????...content

???</div>

</div>

栗子配圖:?

6、久蓉icon

?

7、表單頁面流式布局

栗子:

<el-form>

????<el-row?:gutter="20">

????????<el-col?:xs="24"?:sm="12"?:md="8"?:lg="6">

????????????<el-form-item>...</el-form-item>

????????</el-col>

????????<el-col?:xs="24"?:sm="12"?:md="8"?:lg="6">

????????????<el-form-item>...</el-form-item>

????????</el-col>

????</el-row>

</el-form>

栗子配圖:

?

8、table

table右側操作的icon代碼:

?栗子1-1:?

中間<i></i>默認顯示一個豎杠分隔符(占10像素寬,可疊加)

<span>

????<i?class="jr-icon-edit"?onClick={e?=>?this.handleEdit(row)}></i>

????<i></i>

????<i?class="jr-icon-delete"?onClick={e?=>?this.handleDelete(row)}></i>

</span>

?栗子1-1配圖:

?

8、table高度/彈窗/上傳組件

上傳組件

栗子:

上傳組件首先需要引入"component/file/jr-upload-file"

<el-row>

????<el-col?:xs="24">

??????<p>{{$t('fields.scanFiles')}}</p>

??????<jr-upload-file

?????????:value="currentEntity.agencyAppendixs"

?????????@change="val?=>?input('agencyAppendixs',?val)"

?????????></jr-upload-file>

???</el-col>

</el-row>

栗子配圖:

?

下一步我們會優先整理彈窗樣式...

?

@------------------------------

開發工程:?staice-view;

測試分支:?mfront?7.1theme

栗子分支:?mfront->第三方機構

ziChin

tim

@-------------------------------

轉載于:https://www.cnblogs.com/ziChin/p/10431266.html

總結

以上是生活随笔為你收集整理的公司6：JrVue重用布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。