Helper Hooks(1.0.0)

说明

封装分页的常规操作

示例



函数定义 

function(
  fetchDataCb: () => void,
  option?: { pageSize?: number; total?: number; currentPage?: number; } = { pageSize: 10, total: 0, currentPage: 1 }
): {
  pageSize: Ref<number> // 默认值10
  currentPage: Ref<number> // 默认值1
  total: Ref<number> // 初始值0
  setTotal: (total: number) => void
  setCurrentPage: (currentPage: number) => void // currentPage参数可选，不传默认值为1
  currentPageChange: (currentPage: number) => void
  pageSizeChange: (pageSize: number) => void
}
1
2
3
4
5
6
7
8
9
10
11
12

Demo代码 

<template>
  <hl-pagination
    :current-page="currentPage"
    :page-sizes="[100, 200, 300, 400]"
    :page-size="pageSize"
    layout="sizes, total, slot, prev, pager, next, jumper"
    :total="total"
    align="between"
    class="full"
    @size-change="pageSizeChange"
    @current-change="currentPageChange"
  />
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { HlPagination } from 'helper-ui'
import { usePagination } from './'

export default defineComponent({
  components: {
    HlPagination,
  },
  setup() {
    const getData = () => {
      console.log('fetch Data...', pageSize.value, currentPage.value)

      setTotal(300)
    }

    const {
      pageSize,
      currentPage,
      total,
      setTotal,
      currentPageChange,
      pageSizeChange,
    } = usePagination(getData, { pageSize: 15 })

    onMounted(() => {
      getData()
    })

    return {
      pageSize,
      currentPage,
      total,
      setTotal,
      currentPageChange,
      pageSizeChange,
    }
  },
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54