How to implement vue3 to encapsulate its own paging components

This article mainly explains "how to implement vue3 encapsulation of their own paging components," interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to implement vue3 to encapsulate your own paging components"!

background

When browsing list type data, if the data is relatively large, all requests at once will cause performance loss and loading delay, etc., then the paging component plays a key role at this time. It can only request a part of the data, and it will not occupy too much page space. If you want to see other data, you can initiate a request by changing the page number to refresh the page data.

Now let's wrap the paging component ourselves

Required parameters for components

total attribute: used to pass the total number of data

pagesize attribute: several pieces of data are displayed per page

currentPage attribute: current default page number

change-page event: an event triggered when a page number changes, with the parameter current page number

Component landing code my-pagination.vue

previous page ... {{ item }} ... import { computed, ref } from 'vue-demi'export default { name: 'MyPagination', props: { total: { type: Number, default: 80 }, pagesize: { type: Number, default: 10 } }, setup(props, { emit, attrs }) { //Current page const currentPage = ref(attrs.currentPage) //Calculate total pages const pages = computed(() => Math.ceil(props.total / props.pagesize)) //page number display combination const list = computed(() => { const result = [] //Total pages less than or equal to 5 pages if (pages