vue3.0手动封装分页组件的方法

<!-- page表示初始化分页时，默认显示第几页 -->    <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' />    //调接口 import {findCommentListByGoods } from '@/api/product.js' export default{  setup(){  // 筛选条件准备    const reqParams = reactive({      // 当前页码      page: 1,      // 每页的条数      pageSize: 10,      // 是否有图片      hasPicture: null,      // 筛选条件      tag: null,      // 排序的字段      sortField: null    })    // 侦听参数的变化    watch(reqParams, () => {   findCommentListByGoods(goods.value.id, reqParams).then(ret => {        total.value = ret.result.counts        list.value = ret.result.items      })    }, {      immediate: true    })    // 控制页码的变化    const changePage = (page) => {      // 修改分页参数，重新调用接口即可      reqParams.page = page    }      } }

<template>  <div class="xtx-pagination">    <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}">上一页</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}'>下一页</a>  </div></template><script>import { computed, ref } from 'vue'export default {  name: 'XtxPagination',  props: {    total: {      type: Number,      default: 80    },    pagesize: {      type: Number,      default: 10    }    // 默认初始页码    // page: {    //   type: Number,    //   default: 1    // }  },  setup (props, { emit, attrs }) {    // attrs表示父组件传递的属性，但是props没有接收的属性，这种属性不是响应式的    // 动态计算中期的页码信息    // 每页的条数    // const pagesize = 8    // 总页数    let pages = Math.ceil(props.total / props.pagesize)    // 当前页码    // console.log(attrs.page)    const currentPage = ref(attrs.page || 1)    // 动态计算页码列表    const list = computed(() => {      // 当父组件传递total的值发生变化时，计算属性会重新计算      pages = Math.ceil(props.total / props.pagesize)      const result = []      // 总页码小于等于5；大于5      if (pages <= 5) {        // 总页码小于等于5的情况        for (let i = 1; i <= pages; i++) {          result.push(i)        }      } else {        // 总页码大于5        if (currentPage.value <= 2) {          // 左侧临界值          for (let i = 1; i <= 5; i++) {            result.push(i)          }        } else if (currentPage.value >= pages - 1) {          // 右侧临界值          for (let i = pages - 4; i <= pages; i++) {            result.push(i)          }        } else {          // 中间的状态          for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {            result.push(i)          }        }      }      return result    })    // 控制上一页和下一页变化    const changePage = (type) => {      if (type === false) {        // 上一页        // 页面是第一页时，禁止点击操作        if (currentPage.value === 1) return        if (currentPage.value > 1) {          currentPage.value -= 1        }      } else if (type === true) {        // 下一页        // 页面是最后页时，禁止点击操作        if (currentPage.value === pages) return        if (currentPage.value < pages) {          currentPage.value += 1        }      } else {        // 点击页码        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>