!16 [修复]分页组件的maxPage计算问题导致的页码显示问题

Merge pull request !16 from 鄢鹏权/develop
2022-01-08 03:44:13 +00:00 · 2022-01-08 03:44:13 +00:00 · 8b5b8e2fe5
commit 8b5b8e2fe5
parent 0e4d5d65e5 87d915bb62
4 changed files with 211 additions and 107 deletions
--- a/example/docs/zh-CN/components/page.md
+++ b/example/docs/zh-CN/components/page.md
@ -7,7 +7,7 @@
 ::: demo

 <template>
-  <lay-page :limit="limit" :total="total" :show-page="showPage"></lay-page>
+  <lay-page :limit="limit" 	@limit="limit = $event" :total="total" :show-page="showPage"></lay-page>
 </template>

 <script>
@ -37,7 +37,7 @@ export default {
 ::: demo

 <template>
-  <lay-page :limit="limit" :total="total"></lay-page>
+  <lay-page :limit="limit"	@limit="limit = $event" :total="total"></lay-page>
 </template>

 <script>
@ -65,7 +65,7 @@ export default {
 ::: demo

 <template>
-  <lay-page :limit="limit" :total="total">
+  <lay-page :limit="limit"	@limit="limit = $event" :total="total">
    <template v-slot:prev>上</template>
    <template v-slot:next>下</template>
  </lay-page>
@ -96,11 +96,11 @@ export default {
 ::: demo

 <template>
-  <lay-page :limit="limit" :total="total" :show-page="showPage" theme="red"></lay-page>
+  <lay-page :limit="limit"	@limit="limit = $event" :total="total" :show-page="showPage" theme="red"></lay-page>
  <br>
-  <lay-page :limit="limit" :total="total" :show-page="showPage" theme="blue"></lay-page>
+  <lay-page :limit="limit"	@limit="limit = $event" :total="total" :show-page="showPage" theme="blue"></lay-page>
  <br>
-  <lay-page :limit="limit" :total="total" :show-page="showPage" theme="orange"></lay-page>
+  <lay-page :limit="limit"	@limit="limit = $event" :total="total" :show-page="showPage" theme="orange"></lay-page>
 </template>

 <script>
@ -124,13 +124,13 @@ export default {

 :::

-::: title 完整分页
+::: title 指定分页容量
 :::

 ::: demo

 <template>
-  <lay-page :limit="limit" :total="total" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
+  <lay-page :limit="limit" :total="total" showCount showPage :limits="[10,50,100,200]" @limit="limit=$event"></lay-page>
 </template>

 <script>
@ -141,6 +141,66 @@ export default {

    const limit = ref(20)
    const total = ref(100)
+
+    return {
+      limit,
+      total
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 每页数量切换事件(limit)
+:::
+
+::: demo
+
+<template>
+  <lay-page :limit="limit" showPage showCount :total="total" @limit="limit=$event" :show-limit="showLimit" ></lay-page>
+  <div>每页数量:{{limit}}</div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const limit = ref(5)
+    const total = ref(9999)
+    const showLimit = ref(true)
+
+    return {
+      limit,
+      total,
+      showLimit,
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 完整分页
+:::
+
+::: demo
+
+<template>
+  <lay-page :limit="limit" :total="9999" :show-count="showCount" @limit="limit=$event" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
+  每页数量:{{limit}}
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const limit = ref(5)
+    const total = ref(9999)
    const showCount = ref(true)
    const showPage = ref(true)
    const showLimit = ref(true)
@ -162,13 +222,13 @@ export default {

 :::

-::: title 切换事件
+::: title 页码切换事件(jump)
 :::

 ::: demo

 <template>
-  <lay-page :limit="limit" :total="total" @jump="jump" :show-page="showSkip"></lay-page>
+  <lay-page :limit="limit" :total="total" @jump="jump" 	@limit="limit = $event" :show-page="showSkip"></lay-page>
 </template>

 <script>
@ -210,6 +270,8 @@ export default {
 | showLimit   | 显示每页数量 | `false` |
 | showRefresh | 显示刷新按钮 | `false` |
 | showSkip    | 显示跳转     | `false` |
+| pages       | 显示切页按钮数量     | `10` |
+| limits       | 切换每页数量的选择项     | `[10,20,30,40,50]` |

 :::

@ -221,6 +283,7 @@ export default {
 | 事件 | 描述     | 参数                  |
 | ---- | -------- | --------------------- |
 | jump | 切换回调 | { current: 当前页面 } |
+| limit | 每页数量变化 | 变化后的值 |

 :::

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@layui/layui-vue",
-  "version": "0.3.2",
+  "version": "0.3.3",
  "author": "sleeprite",
  "license": "MIT",
  "description": "a component library for Vue 3 base on layui-vue",
@ -28,7 +28,8 @@
    "build:example": "vite build example",
    "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
    "lint:prettier": "prettier --write  'src/**/*'",
-    "commit": "git cz"
+    "commit": "git cz",
+    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "@layui/hooks-vue": "^0.1.6",
@ -60,13 +61,13 @@
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.2.0",
+    "less": "^4.1.2",
    "markdown-it-container": "^3.0.0",
    "prettier": "^2.5.1",
    "prismjs": "^1.25.0",
    "rimraf": "^3.0.2",
    "rollup": "^2.61.0",
    "typescript": "^4.5.2",
-    "less": "^4.1.2",
    "vite": "2.7.6",
    "vite-plugin-md": "^0.11.6"
  },
@ -79,4 +80,4 @@
    "last 2 versions and > 2%",
    "ie > 10"
  ]
-}
+}
--- a/src/index.ts
+++ b/src/index.ts
@ -72,7 +72,7 @@ import LayStep from "./module/step/index";
 import LayStepItem from "./module/stepItem/index";
 import LaySubMenu from "./module/subMenu/index"

-const components: Record<string, IDefineComponent> = {
+export const components: Record<string, IDefineComponent> = {
  LayRadio,
  LayButton,
  LayIcon,
--- a/src/module/page/index.vue
+++ b/src/module/page/index.vue
@ -1,122 +1,162 @@
 <template>
-  <div class="layui-box layui-laypage layui-laypage-default">
-    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
-    ><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
-    >
-    <template v-if="showPage">
-      <template v-for="index of totalPage" :key="index">
-        <span v-if="index === currentPage" class="layui-laypage-curr"
-          ><em
-            class="layui-laypage-em"
-            :class="[theme ? 'layui-bg-' + theme : '']"
-          ></em
-          ><em>{{ index }}</em></span
-        >
-        <a v-else href="javascript:;" @click="jump(index)">
-          {{ index }}
-        </a>
-      </template>
-    </template>
+	<div class="layui-box layui-laypage layui-laypage-default">
+		<span v-if="showCount" class="layui-laypage-count"
+			>共 {{ total }} 条 {{ maxPage }} 页</span
+		>
+		<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>
+		<template v-if="showPage">
+			<template v-for="index of totalPage" :key="index">
+				<span v-if="index === currentPage" class="layui-laypage-curr">
+					<em
+						class="layui-laypage-em"
+						:class="[theme ? 'layui-bg-' + theme : '']"
+					></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 === 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
-    >
-  </div>
+		<a
+			href="javascript:;"
+			class="layui-laypage-next"
+			:class="[currentPage === maxPage ? '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 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, ComputedRef } from "vue";
+import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";

 const slots = useSlots();

 const props = withDefaults(
-  defineProps<{
-    total: number;
-    limit: number;
-    theme?: string;
-    showPage?: boolean | string;
-    showSkip?: boolean | string;
-    showCount?: boolean | string;
-    showLimit?: boolean | string;
-    showInput?: boolean | string;
-    showRefresh?: boolean | string;
-  }>(),
-  {
-    limit: 10,
-    theme: "green",
-    showPage: false,
-    showSkip: false,
-    showCount: false,
-    showLimit: true,
-    showInput: false,
-    showRefresh: false,
-  }
+	defineProps<{
+		total: number;
+		limit: number;
+		theme?: string;
+		showPage?: boolean | string;
+		showSkip?: boolean | string;
+		showCount?: boolean | string;
+		showLimit?: boolean | string;
+		showInput?: boolean | string;
+		showRefresh?: boolean | string;
+		pages?: number;
+		limits?: number[];
+	}>(),
+	{
+		limit: 10,
+		theme: "green",
+		showPage: false,
+		showSkip: false,
+		showCount: false,
+		showLimit: true,
+		showInput: false,
+		showRefresh: false,
+		pages: 10,
+		limits: () => [10, 20, 30, 40, 50],
+	}
 );
-
-const inlimit = ref(props.limit);
-const totalPage = ref(Math.ceil(props.total / inlimit.value));
+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(0);
+const totalPage = computed(() => {
+	maxPage.value = Math.ceil(props.total / props.limit);
+	let r: number[] = [],
+		start =
+			maxPage.value <= props.pages
+				? 1
+				: currentPage.value > pages
+				? currentPage.value - pages
+				: 1;
+	for (let i = start; ; i++) {
+		if (r.length >= props.pages || i > maxPage.value) {
+			break;
+		}
+		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) {
-    return;
-  }
-  currentPage.value--;
+	if (currentPage.value === 1) {
+		return;
+	}
+	currentPage.value--;
 };

 const next = function () {
-  if (currentPage.value === totalPage.value) {
-    return;
-  }
-  currentPage.value++;
+	if (currentPage.value === maxPage.value) {
+		return;
+	}
+	currentPage.value++;
 };

 const jump = function (page: number) {
-  currentPage.value = page;
+	currentPage.value = page;
 };

 const jumpPage = function () {
-  currentPage.value = currentPageShow.value;
+	currentPage.value = currentPageShow.value;
 };

 watch(inlimit, function () {
-  currentPage.value = 1;
-  totalPage.value = Math.ceil(props.total / inlimit.value);
+	currentPage.value = 1;
+	// maxPage.value = Math.ceil(props.total / inlimit.value);
 });

 watch(currentPage, function () {
-  currentPageShow.value = currentPage.value;
-  emit("jump", { current: currentPage.value });
+	currentPageShow.value = currentPage.value;
+	emit("jump", { current: currentPage.value });
 });
-</script>
+</script>