# Core-Lib-Web

**Repository Path**: thoseyears/core-lib-web

## Basic Information

- **Project Name**: Core-Lib-Web
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-19
- **Last Updated**: 2021-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 公共组件库

## 引入

如果是工程与corelib处于同级目录，则在package.json中:

````
"core-lib": "file:../core-lib"
````

然后npm install。最后在main.js中导入：

````
import CoreLib from 'core-lib'

Vue.use(CoreLib)
````

## 布局

### ClPage

每个页面需要用ClPage作为根节点，ClPage包含了面包屑、二级导航、以及一个内容插槽。

1. 面包屑

面包屑需传入routes，数据结构如下：

````
[
   {
       label: '贷款首页',
       click: () => {
           console.log(this.$router)
       }
   },
   {
       label: '定期存款',
       click: () => {
           this.$router.go(-1)
       }
   }
]
````

注意: click属性比如使用箭头函数，不然this指针会不正确

2. 二级导航

二级导航需传入secondary，结构为一个字符串数组。如果不传此prop，则二级导航不会显示。

````
['贷款', '申请进度查询']
````

二级导航的点击事件为secondary-click，函数定义如下：

````
secondaryClick(i) {
    console.log(i)
}
````

传入initSecondary可以设置默认选中的条目:

````
<cl-page :init-secondary="3"></cl-page>
````

3. 内容插槽

内容插槽内的元素会被插入到class为content的div中。该div的flex为1。整个page的布局为竖着的flex box。

dom完整示例：
````
<cl-page 
    :routes="routes" 
    :secondary="secondary"
    @secondary-click="secondaryClick">
    <div>...</div>
</cl-page>
````

4. 如果页面底部没有固定的栏目，可以使用auto-height属性，这时垂直滚动条会出现在整个页面：

````
<cl-page 
    :routes="routes" 
    :secondary="secondary"
    @secondary-click="secondaryClick"
    auto-height="true">
    <div>...</div>
</cl-page>
````

5. 详情页，可以如下写法:

````
<cl-page :routes="routes" auto-height="true" @secondary-click='secondaryClick'>
	<div class="header-wrapper" slot="header">
	    ...
	</div>
	<div class="form-wrapper">
		<div class="form-title">基本信息</div>
		...
	</div>
</cl-page>		
````

![](printscreen/8.png "8.png")

### ClTabPage

如果ClPage中的内容插槽内需要使用子组件时，可以使用ClTabPage来充当子组件的根节点:

````
<template>
    <cl-tab-page>
        ...
    </cl-tab-page>
</template>
````

### ClHorAdaptive、ClAdaptiveContent

这两个布局配合起来，来实现表格头部或者底部的布局，使屏幕宽度变小时，左侧元素能换行，而不至于与右侧重叠

````
<cl-hor-adaptive>
   <cl-adaptive-content>
       <div>我会被换行</div>
       <div>我会被换行</div>
       <div>我会被换行</div>
       <div>我会被换行</div>
   </cl-adaptive-content>
   <div>我固定在右侧</div>
</cl-hor-adaptive>
````

### ClTableFooter

此布局主要用在表格底部，包含左侧内容插槽，与右侧分页。插槽内的元素，在屏幕宽度不够的情况下会换行。分页参数待定。

````
<cl-table-footer>
    <div class="footer-item">笔数：<span class="primary">10笔</span></div>
    <cl-divider></cl-divider>
    <div class="footer-item">金额：<span class="primary">1,500，000.00</span></div>
    <div class="footer-item">全部合计： 交易笔数：<span class="primary">20笔</span></div>
    <cl-divider></cl-divider>
    <div class="footer-item">金额：<span class="primary">3000，000.00</span></div>
    
    <cl-pagination slot="page" :page.sync="page" :total.sync="total" :page-size.sync="pageSize"></cl-pagination>
</cl-table-footer>
````

### ClFormFooter

此布局用在form表单底部，包含几个操作按钮。如果要控制按钮个数，可以使用exclude或者include属性，传入按钮的编号，include与exclude同时存在，如果有include，则exclude不会生效：

````
<cl-form-footer exclude="submit"></cl-form-footer>
<cl-form-footer :exclude="['submit', 'stash']"></cl-form-footer>
<cl-form-footer :include="['submit', 'stash']"></cl-form-footer>
````

按钮的点击事件与按钮的编号相同：
````
<cl-form-footer @submit="" @back="" @reset="" @stash="" @refuse="" @pass=""></cl-form-footer>
````

依次为提交、返回、重置、暂存、驳回、通过。其中返回按钮会默认默认后退一页，无需处理

### ClFormBlock、ClFormPart

此布局需要配合起来来布局form的输入区域:

````
<cl-form-block>
    <cl-form-part>
        <el-form-item>...</el-form-item>
        <el-form-item>...</el-form-item>
        <el-form-item>...</el-form-item>
    </cl-form-part>
    <cl-form-part>
            <el-form-item>...</el-form-item>
            <el-form-item>...</el-form-item>
            <el-form-item>...</el-form-item>
        </cl-form-part>
</cl-form-block>
````

ClFormBlock是横向的一整行，两个ClFormPart则会平分这一行，一个ClFormBlock最多支持0-2个ClFormPart

如果一个控件占满一行，则不需要使用ClFormPart，直接为ClFormBlock控件加上single属性即可：

````
<cl-form-block single>
   <el-form-item label="备注：">
       <el-input type="textarea" class="form-input"></el-input>
   </el-form-item>
</cl-form-block>
````

### ClFormExpandable

表单可展开布局，如果表单标题可以点击展开收起，可以使用此布局：

````
<cl-form-expandable>
    <div slot="title" class="form-title">审批历程</div>
    <div>我可以被隐藏</div>
</cl-form-expandable>
````

内容默认被展开。使用title插槽修改标题部分，也可以使用tip插槽修改展开的提示部分

![](printscreen/7.png "7.png")

## 导航

### ClBreadcrumb

面包屑，被集成进了ClPage布局，使用方法参考ClPage

### ClSecondaryNav

二级导航，被集成进了ClPage布局，使用方法参考ClPage

### ClTertiaryNav

三级导航，需传入data属性，结构如下：

````
['生效中', { text: '已完结', bubble: 2 }, '全部']
````

元素可以是纯字符串，也可以是一个对象，bubble属性会显示成一个小气泡。

导航点击事件为click，init可以设置初始选中的条目，整体示例:

````
<cl-tertiary-nav :data="tertiary" @click="itemClick" :init="3"></cl-tertiary-nav>

itemClick(i) {
    console.log(i)
}
````

## 控件

### ClButton

按钮控件，有pattern、type、size三种属性。
1. pattern控制样式，有线框、纯色、无线框等样式，具体值可以参考css\button.less中的类定义

````
// pattern为primary会应用下面的类
.cl-button-primary

// pattern为primary并且被高亮会应用下面的类
.cl-button-primary-status
````
如果需要新增pattern，就是新增两个类定义

````
<cl-button pattern="primary">导出</cl-button>
````

2. type控制整体的类型，包括图标icon与pattern，type会覆盖传入的pattern。这里为了开发方便，减少代码做了此设计，但是带来的是灵活度不够，需要有没有预先定义的icon，就需要新增一种type。

````
<cl-button type="filter" />

// type也会默认有按钮文字，如果想使用某个type的icon，但是不想使用文字，可以这样
<cl-button type="add" :disable-html="true">上传文件</cl-button>
````

3. size控制大小，默认是最小的状态，也就是表格上方的操作按钮。medium就是二级导航按钮的大小。big就是表单页面最下方的大按钮的大小

````
<cl-button pattern="primary" size="big">提交</cl-button>
````

### ClDivider

短小的竖状分割线，没有任何属性，不排除后续会加，可以使用在表格上方或者下方的需要分割线的地方

### ClPagination

分页组件，集成进了ClTableFooter，使用比较简单，如下：

````
<cl-pagination :page.sync="page" :total.sync="total" :page-size.sync="pageSize"></cl-pagination>
````
注意：三个属性都需要带.sync，不然更新后的值，没法传递到父组件中。

### 筛选 ClFilter、ClFilterItem

筛选相关组件，基本用法：

````
<cl-filter @reset="" @filter="">
    <cl-filter-item label="业务类型">
        <el-select v-model="relCorpName" size="small" placeholder="请选择">
            ...
        </el-select>
    </cl-filter-item>
</cl-filter>
````

其中ClFilterItem的label属性不需要带冒号，所有el的输入相关控件，都需要加上size="small"。清空事件为reset，筛选事件为filter。

如果需要显示更多条件，则可以将隐藏的条目放入more插槽内：

````
<cl-filter @reset="" @filter="">
    <cl-filter-item label="业务类型">
        <el-select v-model="relCorpName" size="small" placeholder="请选择">
            ...
        </el-select>
    </cl-filter-item>
    <cl-filter-item label="业务类型1">
        <el-select v-model="relCorpName" size="small" placeholder="请选择">
            ...
        </el-select>
    </cl-filter-item>

    <template slot="more">
        <cl-filter-item label="业务类型2">
            <el-select v-model="relCorpName" size="small" placeholder="请选择">
                ...
            </el-select>
        </cl-filter-item>
    </template>
</cl-filter>
````

如果需要修改页面上点击弹出筛选框的筛选按钮，可以使用reference插槽。并且可以使用slot-scope来获取弹窗的显示状态

````
<cl-filter @reset="" @filter="">
    ....
    <cl-button slot="reference" slot-scope="{ show }" :focus="show">自定义按钮</cl-button>
</cl-filter>
````

如果需要完全修改弹窗的清空已选、筛选的按钮，可以使用actions插槽

````
<cl-filter @reset="" @filter="">
    ....
    <template slot="actions">
        <cl-button size="big">1</cl-button>
        <cl-button pattern="primary" size="big">2</cl-button>
    </template>
</cl-filter>
````

如果只需要修改清空已选、筛选的按钮的文字，可以如下：

````
<cl-filter clear-text="清空" filter-text="确定">
    ....
</cl-filter>
````

如果一行有两个输入框或者选择框，可以如下：

````
<cl-filter-item label="业务类型">
    <div class="filter-multi-input">
        <el-input size="small" v-model="accountNo" placeholder=""></el-input>
        <span class="slash">-</span>
        <el-input size="small" v-model="accountNo" placeholder=""></el-input>
    </div>
</cl-filter-item>
````

el-input可以替换成el-select

### 多选弹窗 ClSelectPopover

多选弹窗，可用于导出及显示列按钮，基本用法：

````
<cl-select-popover @submit="onSubmit" :data="exptShowList" text="导出"></cl-select-popover>
````

其中data的数据结构为Array，子元素为Object，带有name属性即可，其他属性如code可以自行定义：
````
[
    {name:'合同号',code:'no'},
    {name:'终止日期',code:'endDate'},
    {name:'开始日期',code:'startDate'},
    {name:'业务类型',code:'bussType'},
    {name:'合同金额',code:'amount'}
]
````

submit事件，会重新组装data数组内的对象，为对象加上id与checked属性(但是并不会修改data数组内的对象，而是拷贝一份)，并返回数组：

````
onSubmit(arr) {
    // arr的定义为[{id: 0, name:'合同号', code:'no', checked: true}, ...]
}
````

如果需要修改页面上点击弹出多选框的按钮，可以使用reference插槽。并且可以使用slot-scope来获取弹窗的显示状态

````
<cl-select-popover>
    ....
    <cl-button slot="reference" slot-scope="{ show }" :focus="show">显示列</cl-button>
</cl-select-popover>
````

如果只需要按钮的文字，可以使用text属性：

````
<cl-select-popover text="显示列"></cl-select-popover>
````

如果需要完全修改弹窗的确定按钮，可以使用actions插槽

````
<cl-select-popover>
    ....
    <template slot="actions">
        <cl-button size="big">1</cl-button>
        <cl-button pattern="primary" size="big">2</cl-button>
    </template>
</cl-select-popover>
````

如果只需要修改确定的按钮的文字，可以如下：

````
<cl-select-popover action-text="导出">
    ....
</cl-select-popover>
````

如果需要修改左上角选择（可多选）文字，可以如下：

````
<cl-select-popover hint-text="提示语">
    ....
</cl-select-popover>
````

### 表格ClTable

ClTable只是对ElTable做了一层封装，使的我们可以使用js数组来配置表格的列，方便做列的排序及显隐

#### prop

1. data（Array）

同ElTable的data

2. config（Object）

config映射了ElTable的所有prop，可以参考ElTable的文档，config的键名为驼峰命名，如ElTable的expand-row-keys，在config中的键名为expandRowKeys

````
config: {
     defaultSort: {prop: 'date', order: 'descending'}
}
````

3. events（Object）

events映射了ElTable的所有事件，可以参考ElTable的文档，events的键名需与ElTable的事件名保持一致，如ElTable的cell-click事件，在config中的键名为cell-click

````
events: {
     'cell-click': vm.cellClick
}
````

4. columns（Array）

columns定义了需要显示的列，columns映射了ElTable中Table-column的所有prop，config的键名为驼峰命名，如ElTable中Table-column的column-key，在config中的键名为columnKey:

````
columns: [
    {
         prop: 'bussVar', 
         label: '业务品种', 
         align: 'center', 
         width: '150',
         filters() { return vm.bussVarList },
         filterMethod() { return vm.filterHandler },
         columnKey: 'bussVar'
    }
]

````

#### 引用vue的data中的变量或方法

在定义columns与config时，如果需要引用data中其他的数据，或者vm对象中的方法，需要改变data的定义方式，以及将需要引用其他的属性定义成方法。如果需要data中其他数据变化能通知到ClTable，则需要返回一个数组，第一个参数为vm对象，第二个为data中数据的键：

````
data: vm => {
    columns: [
        {
             prop: 'bussVar', 
             label: '业务品种', 
             align: 'center', 
             width: '150',
             filters: () => vm.bussVarList, // 无响应式
             filters: () => [vm, 'bussVarList'], // 有响应式
             filterMethod() { return vm.filterHandler },
             columnKey: 'bussVar'
        }
    ],
    bussVarList: [
        { text: '全部', value: '1' },
        { text: '固定资产贷款', value: '固定资产贷款' },
        { text: '流动资产贷款', value: '流动资产贷款' },
        { text: '票据承兑', value: '票据承兑' },
    ]
},
methods: {
    filterHandler(value, row, column) {
        if (value === '1') {
            const property = column['property']
            return !(row[property] === value)
        } else {
            const property = column['property']
            return row[property] === value
        }
    }
}
````

#### 映射Table-column Scoped Slot

如果需要自定义列的内容，需要在定义columns中的列对象时，增加identifier属性：

````
columns: [
    {
        identifier: 'index',
        prop: 'bussNo', label: '序号', align: 'center', width: '150'
    }
]
````

然后在template中通过name为identifier的值的slot，来插入想要的内容：

````
<cl-table :data="tableList" :config="config" :columns="columns" :events="events">
    <template slot="index" slot-scope="scope">
        <span>{{scope.$index+1}}</span>
    </template>
</cl-table>
````

作用域插槽的参数与ElTable保持一致。

如果需要自定义header的内容，需要在定义columns中的列对象时，增加headerIdentifier属性，并且在template中通过name为headerIdentifier的值的slot插入内容即可，用法与identifier一致。

#### 单元格点击

如果单元格可点击，为保持统一样式与开发简便，可以使用clickable与onClick属性：

````
columns: [
    {
        clickable: true,
        onClick() { return vm.goToDetail },
        prop: 'bussNo',
        label: '合同号', align: 'center', width: '150'
    }
]

methods: {
    goToDetail(item) {
        console.log(item)
    }
}
````

item的数据为{ row, column, $index }

#### 操作选项

如果单元格是鼠标滑过显示额外的操作选项，可以为columns中的列对象定义options列表：

````
{
    width: '30px',
    align: 'center',
    options: [
        {name: '11', show: scope => vm.show, click: scope => { console.log(scope, vm) }},
        {name: '22', show: scope => !vm.show}
    ]
}
````

##### name为选项名称
##### show方法返回bool值设置该项是否显示，如果没有show方法默认显示，show定义如下，其中obj为该条目自身对象：

````
show({ row, column, $index }, obj) {}
````

##### click方法为点击事件，定义如下，其中obj为该条目自身对象：

````
click({ row, column, $index }, obj) {}
````

##### 手动修改选项

如果需要手动修改选项，可以直接修改options数组：

````
this.columns[1].options = [
    {name: '修改', click: scope => { console.log(scope, this) }}
]
````

## 表格相关

1. 表格有两个默认样式cl-table-header、cl-table-cell，需要设置给ElTable控件，带上border属性，并且height需要设置成100%

````
<el-table
   height="100%"
   :data='tableList'
   border
   header-cell-class-name="cl-table-header"
   cell-class-name="cl-table-cell">
</el-table
````

也可以使用ClTable，具体用法参考控件一节中的内容：

````
<cl-table :data="tableList" :config="config" :columns="columns" :events="events">
</cl-table>
````

2. 表格需要占满整个屏幕，可以给表格增加一个父节点，class设置为table-wrapper

````
<div class="table-wrapper">
    <el-table...
</div>
````

3. table相关的样式都定义在css/table.less文件中

4. 如果表头表尾有下拉选择框，使用el-select，size为mini并加上cl-table-select类即可：

````
<el-select placeholder="请选择" size="mini" class="cl-table-select" value>
                    <el-option>...</el-option>
</el-select>
````

![](printscreen/6.png "6.png")

## form表单相关

1. form表单页面，需要在ClPage下，定义一个class为form-wrapper的div，并且在div中包含一个el-form组件，label-width需要设置为200px，整个布局都在el-form组件内:

````
<cl-page>
    <div class="form-wrapper">
        <el-form ref="form" :rules="rules" :model="form" label-width="200px" label-position="right">
        ...
        </el-form>
    </div>
</cl-page>
````

2. form表单的标题则可以使用class form-title：

````
<div class="form-title">基本信息</div>
````

3. 表单布局则使用ClFormBlock、ClFormPart来布局，具体用法参考布局的说明。

4. 表单内的el-input需要设置form-input类：

````
<el-input v-model="form.use" class="form-input"></el-input>
<el-input v-model="fileRemark" type="textarea" class="form-input"></el-input>
````

5. 如果输入区域是纯文本，禁止输入，则可以给span设置form-disabled类：

````
<el-form-item label="借款人：">
   <span class="form-disabled">九恒星财务有限公司</span>
</el-form-item>
````

![5](printscreen/1.png "1.png")

大段文字禁止输入，如备注，则使用form-area-disabled类：

````
<cl-form-block single>
    <el-form-item label="备注：">
        <span class="form-area-disabled">资金周转</span>
    </el-form-item>
</cl-form-block>
````

6. 如果一个控件占满一行，则不需要使用ClFormPart，直接为ClFormBlock控件加上single属性即可：

````
<cl-form-block single>
   <el-form-item label="备注：">
       <el-input type="textarea" class="form-input"></el-input>
   </el-form-item>
</cl-form-block>
````

![6](printscreen/3.png "3.png")

7. 如果ui上是多行相隔较近的纯文本，则可以给el-form-item设置一个form-text-item类，并且配合ClFormBlock的single属性使用，其中amount类是预设好的，可以直接使用：

````
<cl-form-block single>
    <el-form-item label="账面金额：" class="form-text-item">
        <span><span class="amount">0.00元</span> 冻结金额：<span class="amount">0.00元</span></span>
    </el-form-item>
    <el-form-item label="账面金额：" class="form-text-item">
        <span><span class="amount">0.00元</span> 冻结金额：<span class="amount">0.00元</span></span>
    </el-form-item>
</cl-form-block>
````

![7](printscreen/4.png "4.png")

8. 如果输入区域后面还有单位之类的文字，则直接在el-input后加：

````
<el-input v-model="form.amount" class="form-input"></el-input>
<span class="form-unit">元</span>
````

![8](printscreen/2.png "2.png")

9. 表单区域最小宽度为1128px，屏幕小于此宽度会出现横向滚动条。

10. 表单的底部区域使用ClFormFooter布局

11. 如果输入区域下方有额外内容，则需要给el-form-item加上form-lower-margin类，并且直接使用form-extra-line类的div即可：

````
<el-form-item label="借款金额：" prop="amount" class="form-lower-margin">
    <el-input disabled v-model="form.amount" class="form-input"></el-input>
    <div class="form-extra-line">
        可用余额：<span class="primary fill-width">5000000</span>
        <cl-button>刷新</cl-button>
    </div>
</el-form-item>
````

如果表单是两列，则需要对另一列的对应位子的元素的el-form-item加上相同的类，以及一个空的form-extra-line类的div:

````
<el-form-item label="xxxx" prop="amount" class="form-lower-margin">
    ....
    <div class="form-extra-line"></div>
</el-form-item>
````

![11](printscreen/5.png "5.png")

12. 如果表头有展开收起，可以使用ClFormExpandable布局，使用方法参考布局部分

## 其他

1. less变量都定义在css/variable/variable.less中，色值或者大小请优先使用变量。如果想在工程中（非corelib中）使用变量，可以这样引用：

````
@import "~core-lib/src/assets/css/variable/variable.less";
````

其他的公共less样式都默认打入了内联样式中，无需额外导入