- <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>
- .pagination-container {
- background: #fff;
- padding: 32px 16px;
- }
- .pagination-container.hidden {
- display: none;
- }
- </style>