Newer
Older
urbanLifeline_YanAn / src / components / Pagination / index.vue
@zhangqy zhangqy on 3 Oct 1 KB first commit
  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.  
  95. </script>
  96.  
  97. <style scoped>
  98. .pagination-container {
  99. background: #fff;
  100. padding: 32px 16px;
  101. }
  102. .pagination-container.hidden {
  103. display: none;
  104. }
  105. </style>