How to manually encapsulate paging components in Vue3.0

<!-- page indicates the default page to be displayed when initializing paging -->
    <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' />
    //Call interface import {findCommentListByGoods } from '@/api/product.js'
 export default{
  setup(){
  // Preparation of screening conditions const reqParams = reactive({
      // Current page number page: 1,
      //Number of entries per pagepageSize: 10,
      // Is there a picture hasPicture: null,
      // Filter condition tag: null,
      // Sorting field sortField: null
    })
    // Listen for parameter changes watch(reqParams, () => {
   findCommentListByGoods(goods.value.id, reqParams).then(ret => {
        total.value = ret.result.counts
        list.value = ret.result.items
      })
    }, {
      immediate: true
    })
    // Control the change of page number const changePage = (page) => {
      // Modify the paging parameters and call the interface again reqParams.page = page
    }
    
  }
 }

<template>
  <div class="xtx-pagination">
    <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}">Previous page</a>
    <span v-if='currentPage > 3'>...</span>
    <a @click='changePage(item)' href="javascript:;" :class='{active: currentPage===item}' v-for='item in list' :key='item'>{{item}}</a>
    <span v-if='currentPage < pages - 2'>...</span>
    <a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}'>Next page</a>
  </div>
</template>
<script>
import { computed, ref } from 'vue'

export default {
  name: 'XtxPagination',
  props: {
    total:
      type: Number,
      default: 80
    },
    pagesize: {
      type: Number,
      default: 10
    }
    //Default initial page number// page: {
    // type: Number,
    // default: 1
    // }
  },
  setup (props, { emit, attrs }) {
    // attrs represents the attributes passed by the parent component, but props does not receive the attributes, which is not responsive // ​​Dynamically calculate the mid-term page number information // Number of items per page // const pagesize = 8
    // Total number of pages let pages = Math.ceil(props.total / props.pagesize)
    //Current page number// console.log(attrs.page)
    const currentPage = ref(attrs.page || 1)
    // Dynamically calculate the page number list const list = computed(() => {
      // When the value of total passed by the parent component changes, the calculated property will recalculate pages = Math.ceil(props.total / props.pagesize)
      const result = []
      // The total page number is less than or equal to 5; greater than 5
      if (pages <= 5) {
        // Total page number is less than or equal to 5 for (let i = 1; i <= pages; i++) {
          result.push(i)
        }
      } else {
        // The total page number is greater than 5
        if (currentPage.value <= 2) {
          // Left critical value for (let i = 1; i <= 5; i++) {
            result.push(i)
          }
        } else if (currentPage.value >= pages - 1) {
          // Right critical value for (let i = pages - 4; i <= pages; i++) {
            result.push(i)
          }
        } else {
          // Intermediate state for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
            result.push(i)
          }
        }
      }
      return result
    })
    // Control the changes of the previous and next pages const changePage = (type) => {
      if (type === false) {
        // Previous page // When the page is the first page, click operation is prohibited if (currentPage.value === 1) return
        if (currentPage.value > 1) {
          currentPage.value -= 1
        }
      } else if (type === true) {
        // Next page // When the page is the last page, click operation is prohibited if (currentPage.value === pages) return
        if (currentPage.value < pages) {
          currentPage.value += 1
        }
      } else {
        // Click on the page currentPage.value = type
      }
      emit('change-page', currentPage.value)
    }
    return { list, currentPage, pages, changePage }
  }
}
</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>