组件使用

源代码：

<script setup>
import Pagination from '@/components/pagination/index.vue'
import {ref} from "vue";const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(120)function loadData() {// 加载数据
}
</script><template><Pagination v-model:page-num="pageNum"v-model:page-size="pageSize":total="total"@loadData="loadData"/>
</template><style lang="scss" scoped>
</style>

组件属性

名称	类型	默认值	是否必需	说明
pageNum	Number	1	是	v-model:pageNum双向绑定属性,
pageSize	Number	10	是	v-model:pageSize双向绑定属性
pagerCount	Number	5	否	需要显示的页码号数量
pageSizes	Array	[5,10,15,20]	否	每页的大小
layout	String	‘’	否	prev, pager, next, jumper,total,sizes布局
total	Number	0	是	总条数

组件事件

名称	参数列表	说明
loadData	无	加载分页数据

第三方

// npm install @vueuse/core@11.1.0
import {useDebounceFn} from "@vueuse/core";

外部常量

export const Constants = {// xs 屏幕宽度(单位：px)XS_WIDTH: 768,
}

外部函数

// 获取浏览器窗口宽度
export function getClientWidth(){return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
}

组件源码：

<script setup>
import {computed, onMounted, ref, watch} from "vue";
import {getClientWidth} from "@/util/system.js";
import {Constants} from "@/setting.js";
import {useDebounceFn} from "@vueuse/core";const emit = defineEmits(['loadData', 'update:pageNum', 'update:pageSize'])
const prop = defineProps({pageNum: {type: Number,default: 1},pageSize: {type: Number,default: 10},pagerCount: {type: Number,default: 5},pageSizes: {type: Array,default: [5, 10, 15, 20]},layout: {type: String,default: ''},total: {type: Number,default: 0}
})// 窗口宽度
const clientWidth = ref(getClientWidth())// 窗口大小改变回调
function handleClientWidth() {clientWidth.value = getClientWidth()
}const pageNum1 = ref(prop.pageNum)
const pageSize1 = ref(prop.pageSize)
const pagerCount1 = computed(() => prop.pagerCount)
const pageSizes1 = computed(() => prop.pageSizes)
const layout1 = computed(() => {if (!prop.layout) {// 可视宽度是否小于768pxreturn clientWidth.value < Constants.XS_WIDTH ? 'prev, pager, next, total' : 'prev, pager, next, jumper,total,sizes'} else {return prop.layout}
})
const total1 = computed(() => prop.total)// 监听pageNum和pageSize的变化
watch([pageNum1, pageSize1], ([newPageNum, newPageSize]) => {emit('update:pageNum', newPageNum)emit('update:pageSize', newPageSize)// 节流函数，加载新数据loadData()
})// 防抖函数，处理页大小改变导致页号改变，连续发送两次请求的情况
const loadData = useDebounceFn(() => {emit('loadData')
}, 800)onMounted(() => {window.addEventListener("resize", handleClientWidth)
})
</script>
<template><el-paginationv-model:current-page="pageNum1"v-model:page-size="pageSize1":page-sizes="pageSizes1":layout="layout1":pager-count="pagerCount1":total="total1"hide-on-single-page/>
</template><style lang="scss" scoped></style>