Newer
Older
KaiFengPC / src / components / Pagination / index.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <div :class="{ hidden: hidden }" class="pagination-container">
  3. <el-pagination
  4. :background="background"
  5. v-model:current-page="currentPage"
  6. v-model:page-size="pageSize"
  7. :layout="layout"
  8. :page-sizes="pageSizes"
  9. :pager-count="pagerCount"
  10. :total="total"
  11. @size-change="handleSizeChange"
  12. @current-change="handleCurrentChange"
  13. />
  14. </div>
  15. </template>
  16.  
  17. <script setup>
  18. import { scrollTo } from '@/utils/scroll-to';
  19.  
  20. const props = defineProps({
  21. total: {
  22. required: true,
  23. type: Number,
  24. },
  25. page: {
  26. type: Number,
  27. default: 1,
  28. },
  29. limit: {
  30. type: Number,
  31. default: 20,
  32. },
  33. pageSizes: {
  34. type: Array,
  35. default() {
  36. return [10, 20, 30, 50];
  37. },
  38. },
  39. // 移动端页码按钮的数量端默认值5
  40. pagerCount: {
  41. type: Number,
  42. default: document.body.clientWidth < 992 ? 5 : 7,
  43. },
  44. layout: {
  45. type: String,
  46. default: 'total, sizes, prev, pager, next, jumper',
  47. },
  48. background: {
  49. type: Boolean,
  50. default: true,
  51. },
  52. autoScroll: {
  53. type: Boolean,
  54. default: true,
  55. },
  56. hidden: {
  57. type: Boolean,
  58. default: false,
  59. },
  60. });
  61.  
  62. const emit = defineEmits();
  63. const currentPage = computed({
  64. get() {
  65. return props.page;
  66. },
  67. set(val) {
  68. emit('update:page', val);
  69. },
  70. });
  71. const pageSize = computed({
  72. get() {
  73. return props.limit;
  74. },
  75. set(val) {
  76. emit('update:limit', val);
  77. },
  78. });
  79. function handleSizeChange(val) {
  80. if (currentPage.value * val > props.total) {
  81. currentPage.value = 1;
  82. }
  83. emit('pagination', { page: currentPage.value, limit: val });
  84. if (props.autoScroll) {
  85. scrollTo(0, 800);
  86. }
  87. }
  88. function handleCurrentChange(val) {
  89. emit('pagination', { page: val, limit: pageSize.value });
  90. if (props.autoScroll) {
  91. scrollTo(0, 800);
  92. }
  93. }
  94. </script>
  95.  
  96. <style scoped>
  97. .pagination-container {
  98. background: #fff;
  99. padding: 32px 16px;
  100. margin-top: 30px;
  101. margin-bottom: 30px;
  102. }
  103. .pagination-container.hidden {
  104. display: none;
  105. }
  106. </style>