【精品】vue3中setup语法糖下通用的分页插件

注意：本博客理论基础：https://blog.csdn.net/lianghecai52171314/article/details/125481743

效果

自定义分页插件：PagePlugin.vue

// total ：用来传递数据总条数
// pageSize ：每页展示几条数据
// currentPage ：当前默认页码
// change-page ：页码改变时触发的事件，参数为当前页码

const props = defineProps({
  //数据总条数
  total: {
    type: Number,
    default: 88
  },
  //页面大小
  pageSize: {
    type: Number,
    default: 16
  },
  //当前显示的页码
  currentPage: {
    type: Number,
    default: 1
  }
});

let currentNum = ref(props.currentPage);

import {computed, ref} from 'vue'

// 页码显示组合
// 计算总页数
const pages = computed(() => Math.ceil(props.total / props.pageSize ));

const list = computed(() => {
  const result = []
  // 总页数小于等于5页的时候
  if (pages.value 上一页
    ...
    {{ item }}
    ...
    下一页
  



.my-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: #27BA9B;
    }

    &.active {
      background: #27BA9B;
      color: #fff;
      border-color: #27BA9B;
    }

    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;

      &:hover {
        color: #333;
      }
    }
  }

  > span {
    margin-right: 10px;
  }
}

使用插件

import PagePlugin from "@/components/PagePlugin.vue";

function changePage(currentPage){
  // alert(currentPage)
  console.log(currentPage)
}