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

切换私有源

Browse Source
This commit is contained in:
castleiMac 2022-01-04 18:43:58 +08:00
parent 064a436451
commit a455abee12
2 changed files with 125 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "@layui/layui-vue", "name": "@ctsy/layui-vue",
"version": "0.3.2", "version": "0.3.2",
"author": "sleeprite", "author": "sleeprite",
"license": "MIT", "license": "MIT",

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

@ -1,133 +1,156 @@
<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 }} 条 {{}} 页</span
href="javascript:;" ><a
class="layui-laypage-prev" href="javascript:;"
:class="[currentPage === 1 ? 'layui-disabled' : '']" class="layui-laypage-prev"
@click="prev()" :class="[currentPage === 1 ? 'layui-disabled' : '']"
><slot v-if="slots.prev" name="prev"></slot> @click="prev()"
<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"> <template v-if="showPage">
<span v-if="index === currentPage" class="layui-laypage-curr" <template v-for="index of totalPage" :key="index">
><em <span v-if="index === currentPage" class="layui-laypage-curr"
class="layui-laypage-em" ><em
:class="[theme ? 'layui-bg-' + theme : '']" class="layui-laypage-em"
></em :class="[theme ? 'layui-bg-' + theme : '']"
><em>{{ index }}</em></span ></em
> ><em>{{ index }}</em></span
<a v-else href="javascript:;" @click="jump(index)"> >
{{ index }} <a v-else href="javascript:;" @click="jump(index)">
</a> {{ index }}
</template> </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 === totalPage ? 'layui-disabled' : '']"
@click="next()" @click="next()"
><slot v-if="slots.next" name="next"></slot> ><slot v-if="slots.next" name="next"></slot>
<template v-else>下一页</template></a <template v-else>下一页</template></a
><span v-if="showLimit" class="layui-laypage-limits" ><span v-if="showLimit" class="layui-laypage-limits"
><select v-model="inlimit"> ><select v-model="inlimit">
<option value="10">10 条/页</option> <option value="10">10 条/页</option>
<option value="20">20 条/页</option> <option value="20">20 条/页</option>
<option value="30">30 条/页</option> <option value="30">30 条/页</option>
<option value="40">40 条/页</option> <option value="40">40 条/页</option>
<option value="50">50 条/页</option> <option value="50">50 条/页</option>
</select></span </select></span
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh" ><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
><i class="layui-icon layui-icon-refresh"></i></a ><i class="layui-icon layui-icon-refresh"></i></a
><span v-if="showSkip" class="layui-laypage-skip" ><span v-if="showSkip" class="layui-laypage-skip"
>到第<input >到第<input
v-model="currentPageShow" v-model="currentPageShow"
type="number" type="number"
class="layui-input layui-input-number" class="layui-input layui-input-number"
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()"> />页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
确定 确定
</button></span </button></span
> >
</div> </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,
ComputedRef,
} 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; pages?: number;
showPage?: boolean | string; theme?: string;
showSkip?: boolean | string; showPage?: boolean | string;
showCount?: boolean | string; showSkip?: boolean | string;
showLimit?: boolean | string; showCount?: boolean | string;
showInput?: boolean | string; showLimit?: boolean | string;
showRefresh?: boolean | string; showInput?: boolean | string;
}>(), showRefresh?: boolean | string;
{ }>(),
limit: 10, {
theme: "green", limit: 10,
showPage: false, pages: 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,
}
); );
const limits = ref(props.limits); const pages = props.pages / 2;
const pages = props.pages / 2 const inlimit = computed({
const inlimit = computed({ get() { return props.limit }, set(v: number) { emit('limit', v) } }) get() {
return props.limit;
},
set(v: number) {
emit("limit", v);
},
});
const maxPage = ref(Math.ceil(props.total / props.limit)); const maxPage = ref(Math.ceil(props.total / props.limit));
const totalPage = computed(() => { const totalPage = computed(() => {
let r: number[] = [], start = (maxPage.value <= props.pages ? 1 : currentPage.value > pages ? currentPage.value - pages : 1) let r: number[] = [],
for (let i = start; ; i++) { start =
if (r.length >= props.pages || i > maxPage.value) { maxPage.value <= props.pages
break; ? 1
} : currentPage.value > pages
r.push(i) ? currentPage.value - pages
} : 1;
return r; 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 === totalPage.value[totalPage.value.length - 1]) {
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); // totalPage.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>