theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Merge pull request !16 from 鄢鹏权/develop
This commit is contained in:
就眠儀式 2022-01-08 03:44:13 +00:00 committed by Gitee
commit 8b5b8e2fe5
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
4 changed files with 211 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
example/docs/zh-CN/components/page.md
View File

@ -7,7 +7,7 @@
::: demo ::: demo
<template> <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> </template>
<script> <script>
@ -37,7 +37,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" :total="total"></lay-page> <lay-page :limit="limit" @limit="limit = $event" :total="total"></lay-page>
</template> </template>
<script> <script>
@ -65,7 +65,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" :total="total"> <lay-page :limit="limit" @limit="limit = $event" :total="total">
<template v-slot:prev>上</template> <template v-slot:prev>上</template>
<template v-slot:next>下</template> <template v-slot:next>下</template>
</lay-page> </lay-page>
@ -96,11 +96,11 @@ export default {
::: demo ::: demo
<template> <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> <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> <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> </template>
<script> <script>
@ -124,13 +124,13 @@ export default {
::: :::
::: title 完整分页 ::: title 指定分页容量
::: :::
::: demo ::: demo
<template> <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> </template>
<script> <script>
@ -141,6 +141,66 @@ export default {
const limit = ref(20) const limit = ref(20)
const total = ref(100) 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 showCount = ref(true)
const showPage = ref(true) const showPage = ref(true)
const showLimit = ref(true) const showLimit = ref(true)
@ -162,13 +222,13 @@ export default {
::: :::
::: title 切换事件 ::: title 页码切换事件(jump)
::: :::
::: demo ::: demo
<template> <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> </template>
<script> <script>
@ -210,6 +270,8 @@ export default {
| showLimit | 显示每页数量 | `false` | | showLimit | 显示每页数量 | `false` |
| showRefresh | 显示刷新按钮 | `false` | | showRefresh | 显示刷新按钮 | `false` |
| showSkip | 显示跳转 | `false` | | showSkip | 显示跳转 | `false` |
| pages | 显示切页按钮数量 | `10` |
| limits | 切换每页数量的选择项 | `[10,20,30,40,50]` |
::: :::
@ -221,6 +283,7 @@ export default {
| 事件 | 描述 | 参数 | | 事件 | 描述 | 参数 |
| ---- | -------- | --------------------- | | ---- | -------- | --------------------- |
| jump | 切换回调 | { current: 当前页面 } | | jump | 切换回调 | { current: 当前页面 } |
| limit | 每页数量变化 | 变化后的值 |
::: :::

7
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@layui/layui-vue", "name": "@layui/layui-vue",
"version": "0.3.2", "version": "0.3.3",
"author": "sleeprite", "author": "sleeprite",
"license": "MIT", "license": "MIT",
"description": "a component library for Vue 3 base on layui-vue", "description": "a component library for Vue 3 base on layui-vue",
@ -28,7 +28,8 @@
"build:example": "vite build example", "build:example": "vite build example",
"lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix", "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
"lint:prettier": "prettier --write 'src/**/*'", "lint:prettier": "prettier --write 'src/**/*'",
"commit": "git cz" "commit": "git cz",
"prepublishOnly": "npm run build"
}, },
"dependencies": { "dependencies": {
"@layui/hooks-vue": "^0.1.6", "@layui/hooks-vue": "^0.1.6",
@ -60,13 +61,13 @@
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.2.0", "eslint-plugin-vue": "^8.2.0",
"less": "^4.1.2",
"markdown-it-container": "^3.0.0", "markdown-it-container": "^3.0.0",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"prismjs": "^1.25.0", "prismjs": "^1.25.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.61.0", "rollup": "^2.61.0",
"typescript": "^4.5.2", "typescript": "^4.5.2",
"less": "^4.1.2",
"vite": "2.7.6", "vite": "2.7.6",
"vite-plugin-md": "^0.11.6" "vite-plugin-md": "^0.11.6"
}, },

2
src/index.ts
View File

@ -72,7 +72,7 @@ import LayStep from "./module/step/index";
import LayStepItem from "./module/stepItem/index"; import LayStepItem from "./module/stepItem/index";
import LaySubMenu from "./module/subMenu/index" import LaySubMenu from "./module/subMenu/index"
const components: Record<string, IDefineComponent> = { export const components: Record<string, IDefineComponent> = {
LayRadio, LayRadio,
LayButton, LayButton,
LayIcon, LayIcon,

222
src/module/page/index.vue
View File

@ -1,122 +1,162 @@
<template> <template>
<div class="layui-box layui-laypage layui-laypage-default"> <div class="layui-box layui-laypage layui-laypage-default">
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span <span v-if="showCount" class="layui-laypage-count"
><a >共 {{ total }} 条 {{ maxPage }} 页</span
href="javascript:;" >
class="layui-laypage-prev" <a
:class="[currentPage === 1 ? 'layui-disabled' : '']" href="javascript:;"
@click="prev()" class="layui-laypage-prev"
><slot v-if="slots.prev" name="prev"></slot> :class="[currentPage === 1 ? 'layui-disabled' : '']"
<template v-else>上一页</template></a @click="prev()"
> >
<template v-if="showPage"> <slot v-if="slots.prev" name="prev"></slot>
<template v-for="index of totalPage" :key="index"> <template v-else>上一页</template>
<span v-if="index === currentPage" class="layui-laypage-curr" </a>
><em <template v-if="showPage">
class="layui-laypage-em" <template v-for="index of totalPage" :key="index">
:class="[theme ? 'layui-bg-' + theme : '']" <span v-if="index === currentPage" class="layui-laypage-curr">
></em <em
><em>{{ index }}</em></span class="layui-laypage-em"
> :class="[theme ? 'layui-bg-' + theme : '']"
<a v-else href="javascript:;" @click="jump(index)"> ></em>
{{ index }} <em>{{ index }}</em>
</a> </span>
</template> <a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
</template> </template>
</template>
<a <a
href="javascript:;" href="javascript:;"
class="layui-laypage-next" class="layui-laypage-next"
:class="[currentPage === totalPage ? 'layui-disabled' : '']" :class="[currentPage === maxPage ? 'layui-disabled' : '']"
@click="next()" @click="next()"
><slot v-if="slots.next" name="next"></slot> >
<template v-else>下一页</template></a <slot v-if="slots.next" name="next"></slot>
><span v-if="showLimit" class="layui-laypage-limits" <template v-else>下一页</template>
><select v-model="inlimit"> </a>
<option value="10">10 条/页</option> <span v-if="showLimit" class="layui-laypage-limits">
<option value="20">20 条/页</option> <select v-model="inlimit">
<option value="30">30 条/页</option> <option v-for="val of limits" :key="val" :value="val">
<option value="40">40 条/页</option> {{ val }} 条/页
<option value="50">50 条/页</option> </option>
</select></span </select>
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh" </span>
><i class="layui-icon layui-icon-refresh"></i></a <a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
><span v-if="showSkip" class="layui-laypage-skip" <i class="layui-icon layui-icon-refresh"></i>
>到第<input </a>
v-model="currentPageShow" <span v-if="showSkip" class="layui-laypage-skip">
type="number" 到第
class="layui-input layui-input-number" <input
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()"> v-model="currentPageShow"
确定 type="number"
</button></span class="layui-input layui-input-number"
> />页
</div> <button
type="button"
class="layui-laypage-btn"
@click="jumpPage()"
:disabled="currentPageShow > maxPage"
>
确定
</button>
</span>
</div>
</template> </template>
<script setup name="LayPage" lang="ts"> <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 slots = useSlots();
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
total: number; total: number;
limit: number; limit: number;
theme?: string; theme?: string;
showPage?: boolean | string; showPage?: boolean | string;
showSkip?: boolean | string; showSkip?: boolean | string;
showCount?: boolean | string; showCount?: boolean | string;
showLimit?: boolean | string; showLimit?: boolean | string;
showInput?: boolean | string; showInput?: boolean | string;
showRefresh?: boolean | string; showRefresh?: boolean | string;
}>(), pages?: number;
{ limits?: number[];
limit: 10, }>(),
theme: "green", {
showPage: false, limit: 10,
showSkip: false, theme: "green",
showCount: false, showPage: false,
showLimit: true, showSkip: false,
showInput: false, showCount: false,
showRefresh: false, showLimit: true,
} showInput: false,
showRefresh: false,
pages: 10,
limits: () => [10, 20, 30, 40, 50],
}
); );
const limits = ref(props.limits);
const inlimit = ref(props.limit); const pages = props.pages / 2;
const totalPage = ref(Math.ceil(props.total / inlimit.value)); 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 currentPage: Ref<number> = ref(1);
const currentPageShow: Ref<number> = ref(currentPage.value); const currentPageShow: Ref<number> = ref(currentPage.value);
const emit = defineEmits(["jump"]);
const emit = defineEmits(["jump", "limit"]);
const prev = function () { const prev = function () {
if (currentPage.value === 1) { if (currentPage.value === 1) {
return; return;
} }
currentPage.value--; currentPage.value--;
}; };
const next = function () { const next = function () {
if (currentPage.value === totalPage.value) { if (currentPage.value === maxPage.value) {
return; return;
} }
currentPage.value++; currentPage.value++;
}; };
const jump = function (page: number) { const jump = function (page: number) {
currentPage.value = page; currentPage.value = page;
}; };
const jumpPage = function () { const jumpPage = function () {
currentPage.value = currentPageShow.value; currentPage.value = currentPageShow.value;
}; };
watch(inlimit, function () { watch(inlimit, function () {
currentPage.value = 1; currentPage.value = 1;
totalPage.value = Math.ceil(props.total / inlimit.value); // maxPage.value = Math.ceil(props.total / inlimit.value);
}); });
watch(currentPage, function () { watch(currentPage, function () {
currentPageShow.value = currentPage.value; currentPageShow.value = currentPage.value;
emit("jump", { current: currentPage.value }); emit("jump", { current: currentPage.value });
}); });
</script> </script>