|
@@ -1,105 +1,140 @@
|
|
|
<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>
|
|
|
+ <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"
|
|
|
+ next-text="下一页" prev-text="上一页"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--<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'
|
|
|
+ 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 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'
|
|
|
+ default: 'prev, pager, next'
|
|
|
+ },
|
|
|
+ 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)
|
|
|
- }
|
|
|
-})
|
|
|
+ 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 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)
|
|
|
- }
|
|
|
-}
|
|
|
+ function handleCurrentChange(val) {
|
|
|
+ emit('pagination', {page: val, limit: pageSize.value})
|
|
|
+ if (props.autoScroll) {
|
|
|
+ scrollTo(0, 800)
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.pagination-container {
|
|
|
- background: #fff;
|
|
|
-}
|
|
|
-.pagination-container.hidden {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+ .pagination-container {
|
|
|
+ background: #f4f4f4;
|
|
|
+ color: #64748b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagination-container.hidden {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-pagination.is-background .btn-next,
|
|
|
+ ::v-deep .el-pagination.is-background .btn-prev,
|
|
|
+ ::v-deep .el-pagination.is-background .btn-pager,
|
|
|
+ ::v-deep .el-pager li {
|
|
|
+ background-color: #f4f4f4; /* 替换为你想要的背景色 */
|
|
|
+ color : #64748b;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-pagination.is-background .btn-next .is-active,
|
|
|
+ ::v-deep .el-pagination.is-background .btn-prev.is-active,
|
|
|
+ ::v-deep .el-pagination.is-background
|
|
|
+ .el-pager li.is-active {
|
|
|
+ background-color: #036143 !important;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|