vue3分页封装

1.使用方法在main中引入import Pagination from '@/components/Pagination'，然后全局挂载：app.component('Pagination', Pagination)

2.页面中使用：<pagination :total="total" v-model:page="obj.page" v-model:limit="obj.limit" @pagination="getList" />，total：总数，page：当前页：limit：条数，@pagination="获取列表的方法"

<template>

  <div :class="{ 'hidden': hidden }" class="pagination-container">

      <el-pagination :background="background" v-model:current-page="currentPage" v-model:page-size="pageSize"

        :layout="layout" :page-sizes="pageSizes" :pager-count="pagerCount" :total="total"

        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>

</template>

<script setup>

import { scrollTo } from '@/utils/scroll-to'

const props = defineProps({

  total: {

    required: true,

    type: Number

  },

  page: {

    type: Number,

    default: 1

  },

  limit: {

    type: Number,

    default: 20

  },

  pageSizes: {

    type: Array,

    default() {

      return [10, 20, 30, 50]

    }

  },

  // 移动端页码按钮的数量端默认值5

  pagerCount: {

    type: Number,

    default: document.body.clientWidth < 992 ? 5 : 7

  },

  layout: {

    type: String,

    default: 'total,sizes, prev, pager, next, jumper'

  },

  background: {

    type: Boolean,

    default: true

  },

  autoScroll: {

    type: Boolean,

    default: true

  },

  hidden: {

    type: Boolean,

    default: false

  }

})

const emit = defineEmits();

const currentPage = computed({

  get() {

    return props.page

  },

  set(val) {

    emit('update:page', val)

  }

})

const pageSize = computed({

  get() {

    return props.limit

  },

  set(val) {

    emit('update:limit', val)

  }

})

function handleSizeChange(val) {

  if (currentPage.value * val > props.total) {

    currentPage.value = 1

  }

  emit('pagination', { page: currentPage.value, limit: val })

  if (props.autoScroll) {

    scrollTo(0, 800)

  }

}

function handleCurrentChange(val) {

  emit('pagination', { page: val, limit: pageSize.value })

  if (props.autoScroll) {

    scrollTo(0, 800)

  }

}

</script>

<style scoped>

/* 未点击时的数字方块背景颜色 */

:deep(.el-pagination .el-pager li:not(.active):not(.disabled)) {

  background-color: #fff !important;

  color: #000;

  border: 1px solid #ccc;

}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {

  /* //修改默认的背景色 */

  background-color: #6954D5 !important;

  border: 1px solid #6954D5;

  color: #fff;

}

/* // prev和next箭头的样式 */

::v-deep(.el-pagination .btn-next),

::v-deep(.el-pagination .btn-prev) {

  background: transparent !important;

  background-color: transparent !important;

}

/* // prev和next箭头disabled的样式 */

::v-deep(.el-pagination button:disabled) {

  background-color: transparent !important;

}

::v-deep(.el-select .el-input__inner){

  color: #6954D5;

}

::v-deep(.el-pagination .el-input__inner ){

  color: #6954D5 !important;

}

.pagination-container {

  background: #fff;

  padding: 32px 16px;

  display: flex;

  align-items: center;

}

.pagination-container.hidden {

  display: none;

}

.totalClass{

  position: absolute;

  right:450px;

  font-family:PingFangSC, PingFang SC;

  color:rgba(0,0,0,0.6);

}

</style>