From e515ece5aa9b631c034274cc70b2eecf3294772f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=91=E8=BD=BB=E7=8B=82?= <1677568218@qq.com>
Date: Mon, 14 Aug 2023 23:26:06 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Pagination.vue | 149 +++++++++++++++++++++++---------------
 1 file changed, 92 insertions(+), 57 deletions(-)

diff --git a/components/Pagination.vue b/components/Pagination.vue
index 3994a14..63e4f70 100644
--- a/components/Pagination.vue
+++ b/components/Pagination.vue
@@ -1,77 +1,115 @@
 <script setup>
-import { computed } from 'vue';
-const props = defineProps(['modelValue', 'pageTotal'])
-const emit = defineEmits(['update:modelValue'])
+import { computed } from "vue";
+const props = defineProps(["modelValue", "pageTotal"]);
+const emit = defineEmits(["update:modelValue"]);
 const onPrev = () => {
   if (props.modelValue <= 1) return; // 限制上一页翻页按钮的边界
-  emit('update:modelValue', props.modelValue - 1)
-}
+  emit("update:modelValue", props.modelValue - 1);
+};
 const onNext = () => {
   if (props.modelValue >= props.pageTotal) return; // 限制下一页翻页按钮的边界
-  emit('update:modelValue', props.modelValue + 1)
-}
+  emit("update:modelValue", props.modelValue + 1);
+};
 const setPageNum = (pageNum) => {
-  if (typeof pageNum !== 'number') return; //如果pageNum不是数值类型则返回
+  if (typeof pageNum !== "number") return; //如果pageNum不是数值类型则返回
   if (pageNum < 1) return; // 限制上一页翻页按钮的边界
   if (pageNum > props.pageTotal) return; // 限制下一页翻页按钮的边界
-  emit('update:modelValue', pageNum)
-}
+  emit("update:modelValue", pageNum);
+};
 
 const genPageArray = (current, total, size) => {
-  let arr = []
+  let arr = [];
   if (total < size + 2) {
-    arr = Array.from({ length: total }, (v, k) => k + 1)
+    arr = Array.from({ length: total }, (v, k) => k + 1);
   } else if (current < size - 2) {
-    arr = Array.from(function* gen(i, l) { while (i < l) yield i++; }(1, size - 2 + 1))
-    arr.push('...')
-    arr.push(total)
+    arr = Array.from(
+      (function* gen(i, l) {
+        while (i < l) yield i++;
+      })(1, size - 2 + 1)
+    );
+    arr.push("...");
+    arr.push(total);
   } else if (total - current < size - 2) {
-    arr.push(1)
-    arr.push('...')
-    arr = arr.concat(Array.from(function* gen(i, l) { while (i < l) yield i++; }(total - size + 2, total + 1)))
+    arr.push(1);
+    arr.push("...");
+    arr = arr.concat(
+      Array.from(
+        (function* gen(i, l) {
+          while (i < l) yield i++;
+        })(total - size + 2, total + 1)
+      )
+    );
   } else {
-    arr.push(1)
-    arr.push('...')
-    arr = arr.concat(Array.from(function* gen(i, l) { while (i < l) yield i++; }(current - Math.floor((size - 4) / 2), current - Math.floor((size - 4) / 2) + size - 4 + 1)))
-    arr.push('...')
-    arr.push(total)
+    arr.push(1);
+    arr.push("...");
+    arr = arr.concat(
+      Array.from(
+        (function* gen(i, l) {
+          while (i < l) yield i++;
+        })(
+          current - Math.floor((size - 4) / 2),
+          current - Math.floor((size - 4) / 2) + size - 4 + 1
+        )
+      )
+    );
+    arr.push("...");
+    arr.push(total);
   }
-  return arr
-}
+  return arr;
+};
 const pageArrayLg = computed(() => {
-  const current = props.modelValue
-  const total = props.pageTotal
-  return genPageArray(current, total, 17)
-})
+  const current = props.modelValue;
+  const total = props.pageTotal;
+  return genPageArray(current, total, 17);
+});
 const pageArrayMd = computed(() => {
-  const current = props.modelValue
-  const total = props.pageTotal
-  return genPageArray(current, total, 10)
-})
+  const current = props.modelValue;
+  const total = props.pageTotal;
+  return genPageArray(current, total, 10);
+});
 const pageArraySm = computed(() => {
-  const current = props.modelValue
-  const total = props.pageTotal
-  return genPageArray(current, total, 6)
-})
+  const current = props.modelValue;
+  const total = props.pageTotal;
+  return genPageArray(current, total, 6);
+});
 </script>
 
 <template>
   <div>
     <div class="container" v-if="props.pageTotal > 1">
-      <div class="paper-item" @click="onPrev" style="display: flex;">&lt;</div>
-      <div v-for="(item, index) in pageArrayLg" :key="index" @click="setPageNum(item)" class="paper-item paper-lg"
-        :class="{ 'active': item == props.modelValue }">{{ item }}</div>
-      <div v-for="(item, index) in pageArrayMd" :key="index" @click="setPageNum(item)" class="paper-item paper-md"
-        :class="{ 'active': item == props.modelValue }">{{ item }}</div>
-      <div v-for="(item, index) in pageArraySm" :key="index" @click="setPageNum(item)" class="paper-item paper-sm"
-        :class="{ 'active': item == props.modelValue }">{{ item }}</div>
-      <div class="paper-item" @click="onNext" style="display: flex;">></div>
+      <div class="paper-item" @click="onPrev" style="display: flex">&lt;</div>
+      <div
+        v-for="(item, index) in pageArrayLg"
+        :key="index"
+        @click="setPageNum(item)"
+        class="paper-item paper-lg"
+        :class="{ active: item == props.modelValue }"
+      >
+        {{ item }}
+      </div>
+      <div
+        v-for="(item, index) in pageArrayMd"
+        :key="index"
+        @click="setPageNum(item)"
+        class="paper-item paper-md"
+        :class="{ active: item == props.modelValue }"
+      >
+        {{ item }}
+      </div>
+      <div
+        v-for="(item, index) in pageArraySm"
+        :key="index"
+        @click="setPageNum(item)"
+        class="paper-item paper-sm"
+        :class="{ active: item == props.modelValue }"
+      >
+        {{ item }}
+      </div>
+      <div class="paper-item" @click="onNext" style="display: flex">></div>
     </div>
   </div>
 </template>
 
-
-
 <style scoped>
 .container {
   margin: 1rem 0;
@@ -82,7 +120,6 @@ const pageArraySm = computed(() => {
 }
 
 @media screen and (min-width: 780px) {
-
   .paper-lg,
   .paper-sm {
     display: none;
@@ -94,7 +131,6 @@ const pageArraySm = computed(() => {
 }
 
 @media screen and (min-width: 1024px) {
-
   .paper-md,
   .paper-sm {
     display: none;
@@ -106,7 +142,6 @@ const pageArraySm = computed(() => {
 }
 
 @media screen and (max-width: 780px) {
-
   .paper-lg,
   .paper-md {
     display: none;
@@ -120,12 +155,12 @@ const pageArraySm = computed(() => {
 .paper-item {
   height: 2rem;
   width: 2rem;
-  margin: 0 .5rem;
-  padding: 0rem .25rem;
+  margin: 0 0.5rem;
+  padding: 0rem 0.25rem;
   align-items: center;
   justify-content: center;
   background-color: #f6f6f7;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   cursor: pointer;
 }
 
@@ -142,8 +177,8 @@ const pageArraySm = computed(() => {
 }
 
 @media (prefers-color-scheme: dark) {
-
-.paper-item {
-  background-color: #9ca3af0d;
+  .paper-item {
+    background-color: #9ca3af0d;
+  }
 }
-}</style>
+</style>