1. Preview the page component rendering

2. Analyze requirements

Common requirements:

Variables:

(1) Total number: total

(2) currentPage: currentPage

(3) Display number of items per page: pageSize

Events:

Page number changed: currentPage

The number of buttons for the page number is 5 by default, and can also be changed as required

3. Basic page turning interactive effect code:

<template> <div class="xtx-pagination"> <a v-if="myCurrentPage <= 1" href="javascript:;" Class ="disabled"> </a> <a @click="changePage(myCurrentPage-1)" V-else href="javascript:;" <span v-if="pager. Start > 1"> <span v-if="pager. Start > 1"> <span v-if="pager. </span> <a @click="changePage(i)" href="javascript:;" :class="{ active: i === myCurrentPage }" v-for="i in pager.btnArr" :key="i" >{{ i }}</a > <span v-if="pager.end < pager.pageCount">... </span> <a v-if="myCurrentPage >= pager.pageCount" href="javascript:;" Class ="disabled" > next page </a > <a @click="changePage(myCurrentPage + 1)" V-else href="javascript:;" > Next </a > </div> </template> <script> import {ref, computed} from 'vue' export default {name: 'Pagination', props: { total: { type: Number, default: 100 }, currentPage: { type: Number, default: 1 }, pageSize: { type: Number, default: 10 } }, setup (props, Emit}) {// const myTotal = ref(100) // const myPageSize = ref(10) // Button count const btnCount = 5 Based on the above data (total page number, start page number, end page number, Button array) const pager = computed(() => {// Count total pages const pageCount = math.ceil (mytotal.value/mypagesize.value) // Calculate the start and end page numbers // 1. Ideally, based on the current page number, Floor (btnCount / 2) let end = start + btnCount - 1 // 2.1 If (start < 1) {start = 1 end = (start + btnCount - 1) > pageCount? pageCount : (start + btnCount - 1)} If (end > pageCount) {end = pageCount start = (end-btncount + 1) < 1? Const btnArr = [] for (let I = start; i <= end; i++) { btnArr.push(i) } return { pageCount, start, end, btnArr } }) return{ pager } } } </script> <style scoped lang="less"> .xtx-pagination { display: flex; justify-content: center; padding: 30px; > a { display: inline-block; padding: 5px 10px; border: 1px solid #e4e4e4; border-radius: 4px; margin-right: 10px; &:hover { color: @xtxColor; } &.active { background: @xtxColor; color: #fff; border-color: @xtxColor; } &.disabled { cursor: not-allowed; Opacity: 0.4; &:hover { color: #333; } } } > span { margin-right: 10px; } } </style>Copy the code

4. The following is the code for the realization of basic functions:

It is mainly through child to parent, when the page number changes to throw events, to achieve the above function

import { ref, computed, watch } from 'vue'

 setup(){
        // Change the page number
    const changePage = (newPage) = > {
      if(myCurrentPage.value ! == newPage) { myCurrentPage.value = newPage// Notify the parent of the latest page number
        emit('current-change', newPage)
      }
    }
    // Listen for incoming value changes
    watch(props, () = > {
      myTotal.value = props.total
      myPageSize.value = props.pageSize
      myCurrentPage.value = props.currentPage
    }, { immediate: true })
    
    return { pager, myCurrentPage, changePage }
  }
    
}
Copy the code

5. Register this component as global

// Paging component
import Pagination from './pagination.vue'
const myPlugin = {
  install (app) {
    // app is an instance of vue
    // app.component.component.component.component.component.component.object
    app.component(Pagination.name, Pagination)
  }
}

export default myPlugin
Copy the code

6. Use components and pass values together

 <XtxPagination
    @current-change="changePager"
    :total="total"
    :current-page="queryObj.page"
 />
 
 <script>
   export default {
     setup () {
       // Record the total number of entries
       const total = ref(0)
       
       const changePager = (page) = > {
         // Synchronize the current page number
         queryObj.page = page
         
       }
       
       return { total, changePager }
     }
   }
 </script>
Copy the code

Make changes based on the needs of the current project for reference only