0.4.0 • Published 3 years ago
hr-frame v0.4.0
hr-frame--基于Vue3二次封装ElementPlus的一款框架
Installation
npm
npm install hr-frame -Syarn
yarn add hr-frame -S
Usage
HrDate
介绍
基于ElementPlus得ElDatePicker组件进行了二次封装，完善了绑定值格式问题API
| 参数 | 说明 | 类型 |
|---|---|---|
| v-model | 双向绑定 | String| Date |
| value-format | 双向绑定值得时间格式 | String |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| date-change | 绑定日期发生改变时触发 | 组件绑定值 |
Usage
<hr-date-picker
v-model="curDate"
type="date"
value-format="YYYY-MM"
@dateChange="dateChange"></hr-date-picker>参考资料
HrTable
介绍
基于ElementPlus的ElTable组件进行的二次封装,将表格组件和分页组件整合在了一起，同时支持表格拖拽功能API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| table-data | 绑定的表格数据 | Array | [] |
| table-column | 表头数据，格式同el-table-column参数 | Array | [] |
| row-key | 每一行的key值 | String | id |
| draggable | 是否开启拖拽(注：开启拖拽需要先指定row-key) | Boolean | false |
| pagination | 是否展示分页 | Boolean | true |
| total | 分页总数 | Number | 0 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| rowDblclick | 双击事件 | row |
| selection-change | 当选择项发生变化时会触发该事件 | 选中的行数据 |
| dragEnd | 拖拽结束时触发的事件 | 排序后的表格数据 |
| current-change | 分页改变时触发的事件 | currentRow |
Usage
<hr-table
:table-data="tableData"
:tableColumns="tableColumns"
draggable
@selection-change="selectionChange"
@rowDblclick="rowDblClick"></hr-table>
tableColumns: [
{label: "日期", prop: "date"},
{label: "姓名", prop: "name"},
{label: "地址", prop: "address"},
],
tableData: [
{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 1516 弄'
}
]参考资料