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

[修复][新增]给page组件增加pages参数，用于限定页数过多情况下的按钮显示数量

Browse Source
This commit is contained in:
castle 2021-12-27 15:16:02 +08:00
parent e49fb0c9d3
commit e803274ba6
2 changed files with 52 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -127,7 +127,7 @@ export default {
::: 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="9999" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
</template>
<script>
@ -136,8 +136,8 @@ import { ref } from 'vue'
export default {
setup() {
const limit = ref(20)
const total = ref(100)
const limit = ref(5)
const total = ref(9999)
const showCount = ref(true)
const showPage = ref(true)
const showLimit = ref(true)
@ -207,6 +207,7 @@ export default {
| showLimit | 显示每页数量 | `false` |
| showRefresh | 显示刷新按钮 | `false` |
| showSkip | 显示跳转 | `false` |
| pages | 显示切页按钮数量 | `10` |
:::

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

@ -1,60 +1,56 @@
<template>
<div class="layui-box layui-laypage layui-laypage-default">
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
><a
<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
>
<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>
<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' : '']"
: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">
>
<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
>
</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>
</template>
<script setup name="LayPage" lang="ts">
import { defineProps, Ref, ref, watch, useSlots } from "vue";
import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
const slots = useSlots();
@ -69,6 +65,7 @@ const props = withDefaults(
showLimit?: boolean | string;
showInput?: boolean | string;
showRefresh?: boolean | string;
pages?: number
}>(),
{
limit: 10,
@ -79,11 +76,26 @@ const props = withDefaults(
showLimit: true,
showInput: false,
showRefresh: false,
pages: 10
}
);
const pages = props.pages / 2
const inlimit = ref(props.limit);
const totalPage = ref(Math.ceil(props.total / inlimit.value));
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 {
end = currentPage.value + pages
}
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);
@ -97,7 +109,7 @@ const prev = function () {
};
const next = function () {
if (currentPage.value === totalPage.value) {
if (currentPage.value === maxPage.value) {
return;
}
currentPage.value++;
@ -113,7 +125,7 @@ const jumpPage = function () {
watch(inlimit, function () {
currentPage.value = 1;
totalPage.value = Math.ceil(props.total / inlimit.value);
maxPage.value = Math.ceil(props.total / inlimit.value);
});
watch(currentPage, function () {