hr-frame--基于Vue3二次封装ElementPlus的一款框架

Installation

• npm

  npm install hr-frame -S

• yarn

  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>

参考资料

el-date-picker

dayjs

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 弄'
          }
        ]

参考资料

el-table

sortablejs