vue3.0手动封装分页组件

1.父组件引入

src/views/goods/components/goods-comment.vue

<!-- page表示初始化分页时，默认显示第几页--><XtxPagination @change-page='changePage':pagesize='reqParams.pageSize':total='total':page='1'/>//调接口import{findCommentListByGoods}from'@/api/product.js'exportdefault{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})// 控制页码的变化constchangePage=(page)=>{// 修改分页参数，重新调用接口即可
      reqParams.page= page}}}

2.子组件

src/components/library/xtx-pagination.vue

<template><divclass="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'exportdefault{
  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；大于5if(pages<=5){// 总页码小于等于5的情况for(let i=1; i<= pages; i++){
          result.push(i)}}else{// 总页码大于5if(currentPage.value<=2){// 左侧临界值for(let i=1; i<=5; i++){
            result.push(i)}}elseif(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})// 控制上一页和下一页变化constchangePage=(type)=>{if(type===false){// 上一页// 页面是第一页时，禁止点击操作if(currentPage.value===1)returnif(currentPage.value>1){
          currentPage.value-=1}}elseif(type===true){// 下一页// 页面是最后页时，禁止点击操作if(currentPage.value=== pages)returnif(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:5px10px;
    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>

知识点：attrs表示父组件传递的属性，但是props没有接收的属性，这种属性不是响应式的（vue3新增）

3.实现效果