chll-common v1.1.0

chall-common

chll-commom工具库是根据个人实战开发经验，基于Vue2和ElementUI封装的业务组件库。目前提供的几个业务组件，后续还会不断的完善：

使用方式

1、安装方式，支持npm、yarn和pnpm安装

• yarn: yarn add chll-common
• npm: npm install chll-common

• pnpm: pnpm install chll-common

2、项目中引入

• 注册为全局组件

  	```
  	import chllCommon from 'chll-common'
  	Vue.use(chllCommon)
  	```

• 按需引入

  			import chllCommon from 'chll-common'
  			const {
  				DateRangePicker,
  				Select,
  				SearchForm,
  				TextEllipsis,
  				TableList } = chllCommon
  			Vue.use(DateRangePicker).use(Select).use(SearchForm).use(TextEllipsis)
  		```

支持的业务组件

TextEllipsis

TextEllipsis是一个超长文本显示省略号的组件，主要解决webkit内核场景下浏览器渲染问题。支持单行超长文本隐藏，也支持多行文本

参数解读 - prop

使用方式

<cl-text-ellipsis
	:value="testStr"
	width="200"
	mulRows
	:maxRows="2"
/>

Select

基于ElementUI的select组件封装。ElementUI的select组件使用起来很麻烦，每次都要写options的for循环。该组件主要就是优化了options的写法。

参数解读 - prop

使用方式

<cl-select
	v-model="selectItem"
	:list="options"
	@change="selectChange"
></cl-select>

selectItem: '',
options: [
	{
		key: '123',
		value: '123'
	},
	{
		key: '456',
		value: '456'
	}
]

--

DateRangePicker

基于原生的DateTimePicker组件的封装，对业务常用的一些快捷项进行结合，提供了快捷的日期范围选择。

参数解读 - prop

使用方式

<cl-date-range-picker
	v-model="timeRange"
/>

SearchForm

基于el-form和表单其他项封装的组件，主要作用是填充后台查询模块的查询表单。目前支持Input、Select和 DateRangePicker等三个类型的项，后续会不断的扩充。

参数解读

prop	类型	默认值	说明
value	{}	必填	表单的双向绑定值
formFields	{}	必填	查询项的配置
formRules	{}	非必填	表单的校验
boforeSubmit	Fn	非必填	点击查询，触发请求之前的表单自定义校验

使用方式

<KFSearchForm
	v-model="searchForm"
	:formFields="formFields"
	@search="queryTableData"
	@reset="resetTable"
/>

TableList

基于原生的el-table组件，结合了el-paginaion功能。支持表格列的配置和、请求参数的构造、请求发起时的loading、响应值的处理和翻页等功能。是一个高集成的功能强大的组件,支持自定义表格数据和表格头。

参数解读 - prop

使用方式

<TableCom
	ref="tableRef"
	:tableConfig="tableConfig"
	:requestFn="getLogOffList"
	:requestParams="buildSearchFormParams()"
	:pageConfig="pageConfig"
	selection
	:selectable="filterSelectableRow"
	@selectionChange="handleSelectionChange"
>