1

src/components/Pagination/index.vue

@@ -42,7 +42,7 @@ export default {
     // 移动端页码按钮的数量端默认值5
     pagerCount: {
       type: Number,
-      default: document.body.clientWidth < 992 ? 5 : 7
+      default: 7
     },
     layout: {
       type: String,
@@ -63,8 +63,19 @@ export default {
   },
   data() {
     return {
+      isMobile: false
     }
   },
+  mounted() {
+    this.isMobile = window.innerWidth < 768
+    if (this.isMobile && this.layout === 'total, sizes, prev, pager, next, jumper') {
+      this.$emit('update:layout', 'prev, pager, next')
+    }
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  },
   computed: {
     currentPage: {
       get() {
@@ -84,6 +95,13 @@ export default {
     }
   },
   methods: {
+    handleResize() {
+      const wasMobile = this.isMobile
+      this.isMobile = window.innerWidth < 768
+      if (wasMobile !== this.isMobile) {
+        this.$forceUpdate()
+      }
+    },
     handleSizeChange(val) {
       if (this.currentPage * val > this.total) {
         this.currentPage = 1
@@ -106,6 +124,33 @@ export default {
 <style scoped>
 .pagination-container {
   background: #fff;
+  
+  @media (max-width: 768px) {
+    padding: 10px 0;
+    
+    ::v-deep .el-pagination {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      gap: 5px;
+      
+      .el-pagination__sizes,
+      .el-pagination__total,
+      .el-pagination__jump {
+        display: none;
+      }
+      
+      .btn-prev,
+      .btn-next,
+      .el-pager li {
+        min-width: 36px;
+        height: 36px;
+        line-height: 36px;
+        font-size: 13px;
+      }
+    }
+  }
 }
 .pagination-container.hidden {
   display: none;