封装的组件使用说明

已封装的组件

分页组件-XhPagination

• 属性

| 属性 | 类型 | 默认值 | 必填 | 说明 | | --------------- | ------ | ------ | ---- | ------------------ | | pageSize | number | 20 | 是 | 每页记录(条)数 | | total | number | 0 | 是 | 总记录数 | | paginationClass | string | '' | 否 | 分页组件自定义类名 |

• 事件

  • onShowSizeChange：接收两个参数,page(当前页)、size(每页记录数)
  • onChangePage：当前页改变的事件,参数pageNumber(当前页)

• 使用指引

  • 全局引入依赖：import XuI from 'hc-ui-cli' import 'hc-ui-cli/dist/hc-ui-cli.css'

  • 在main.ts中进行全局组件注册：app.use(XuI)

  • 按需引入依赖：import {XhPagination, XhTable} from "hc-ui-cli";

  • 在main.ts中进行按需组件注册：app.use(XhPagination);

  • 在页面中使用：

    <xh-agination
          :pageSize="20"
          :total="55"
          @onShowSizeChange="onShowSizeChange"
          @onChangePage="onChangePage"
        />