临时恢复 page 逻辑

src/module/page/index.vue

@@ -1,57 +1,60 @@
 <template>
   <div class="layui-box layui-laypage layui-laypage-default">
-    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条 {{ maxPage }}页</span>
+    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
-    <a
+    ><a
       href="javascript:;"
       class="layui-laypage-prev"
       :class="[currentPage === 1 ? 'layui-disabled' : '']"
       @click="prev()"
+      ><slot v-if="slots.prev" name="prev"></slot>
+      <template v-else>上一页</template></a
     >
-      <slot v-if="slots.prev" name="prev"></slot>
-      <template v-else>上一页</template>
-    </a>
     <template v-if="showPage">
       <template v-for="index of totalPage" :key="index">
-        <span v-if="index === currentPage" class="layui-laypage-curr">
+        <span v-if="index === currentPage" class="layui-laypage-curr"
-          <em class="layui-laypage-em" :class="[theme ? 'layui-bg-' + theme : '']"></em>
+          ><em
-          <em>{{ index }}</em>
+            class="layui-laypage-em"
-        </span>
+            :class="[theme ? 'layui-bg-' + theme : '']"
-        <a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
+          ></em
+          ><em>{{ index }}</em></span
+        >
+        <a v-else href="javascript:;" @click="jump(index)">
+          {{ index }}
+        </a>
       </template>
     </template>
 
     <a
       href="javascript:;"
       class="layui-laypage-next"
-      :class="[currentPage === maxPage ? 'layui-disabled' : '']"
+      :class="[currentPage === totalPage ? 'layui-disabled' : '']"
       @click="next()"
+      ><slot v-if="slots.next" name="next"></slot>
+      <template v-else>下一页</template></a
+    ><span v-if="showLimit" class="layui-laypage-limits"
+      ><select v-model="inlimit">
+        <option value="10">10 条/页</option>
+        <option value="20">20 条/页</option>
+        <option value="30">30 条/页</option>
+        <option value="40">40 条/页</option>
+        <option value="50">50 条/页</option>
+      </select></span
+    ><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
+      ><i class="layui-icon layui-icon-refresh"></i></a
+    ><span v-if="showSkip" class="layui-laypage-skip"
+      >到第<input
+        v-model="currentPageShow"
+        type="number"
+        class="layui-input layui-input-number"
+      />页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
+        确定
+      </button></span
     >
-      <slot v-if="slots.next" name="next"></slot>
-      <template v-else>下一页</template>
-    </a>
-    <span v-if="showLimit" class="layui-laypage-limits">
-      <select v-model="inlimit">
-        <option v-for="val of limits" :key="val" :value="val">{{ val }} 条/页</option>
-      </select>
-    </span>
-    <a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
-      <i class="layui-icon layui-icon-refresh"></i>
-    </a>
-    <span v-if="showSkip" class="layui-laypage-skip">
-      到第
-      <input v-model="currentPageShow" type="number" class="layui-input layui-input-number" />页
-      <button
-        type="button"
-        class="layui-laypage-btn"
-        @click="jumpPage()"
-        :disabled="currentPageShow > maxPage"
-      >确定</button>
-    </span>
   </div>
 </template>
 
 <script setup name="LayPage" lang="ts">
-import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
+import { defineProps, Ref, ref, watch, useSlots, computed, ComputedRef } from "vue";
 
 const slots = useSlots();
 
@@ -66,8 +69,6 @@ const props = withDefaults(
     showLimit?: boolean | string;
     showInput?: boolean | string;
     showRefresh?: boolean | string;
-    pages?: number,
-    limits?: number[]
   }>(),
   {
     limit: 10,
@@ -78,32 +79,14 @@ const props = withDefaults(
     showLimit: true,
     showInput: false,
     showRefresh: false,
-    pages: 10,
-    limits: () => [10, 20, 30, 40, 50]
   }
 );
-const limits = ref(props.limits);
-const pages = props.pages / 2
-const inlimit = computed({ get() { return props.limit }, set(v: number) { emit('limit', v) } })
-const maxPage = ref(Math.ceil(props.total / props.limit));
-const totalPage = computed(() => {
-  let r: number[] = [], end = maxPage.value
-  if (currentPage.value <= pages) {
-    end = props.pages + 1
-  } else if (currentPage.value + pages > end) {
 
-  } else {
+const inlimit = ref(props.limit);
-    end = currentPage.value + pages
+const totalPage = ref(Math.ceil(props.total / inlimit.value));
-  }
-  for (let i = currentPage.value > pages ? currentPage.value - pages : 1; i < end; i++) {
-    r.push(i)
-  }
-  return r;
-})
 const currentPage: Ref<number> = ref(1);
 const currentPageShow: Ref<number> = ref(currentPage.value);
-
+const emit = defineEmits(["jump"]);
-const emit = defineEmits(["jump", "limit"]);
 
 const prev = function () {
   if (currentPage.value === 1) {
@@ -113,7 +96,7 @@ const prev = function () {
 };
 
 const next = function () {
-  if (currentPage.value === maxPage.value) {
+  if (currentPage.value === totalPage.value) {
     return;
   }
   currentPage.value++;
@@ -129,11 +112,11 @@ const jumpPage = function () {
 
 watch(inlimit, function () {
   currentPage.value = 1;
-  maxPage.value = Math.ceil(props.total / inlimit.value);
+  totalPage.value = Math.ceil(props.total / inlimit.value);
 });
 
 watch(currentPage, function () {
   currentPageShow.value = currentPage.value;
   emit("jump", { current: currentPage.value });
 });
-</script>
+</script>