切换私有源
This commit is contained in:
castleiMac
parent
064a436451
commit
a455abee12
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"name": "@ctsy/layui-vue",
|
||||
"version": "0.3.2",
|
||||
"author": "sleeprite",
|
||||
"license": "MIT",
|
||||
@ -79,4 +79,4 @@
|
||||
"last 2 versions and > 2%",
|
||||
"ie > 10"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,133 +1,156 @@
|
||||
<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 }} 条 {{}} 页</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 === 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>
|
||||
</template>
|
||||
|
||||
<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 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;
|
||||
pages?: number;
|
||||
theme?: string;
|
||||
showPage?: boolean | string;
|
||||
showSkip?: boolean | string;
|
||||
showCount?: boolean | string;
|
||||
showLimit?: boolean | string;
|
||||
showInput?: boolean | string;
|
||||
showRefresh?: boolean | string;
|
||||
}>(),
|
||||
{
|
||||
limit: 10,
|
||||
pages: 10,
|
||||
theme: "green",
|
||||
showPage: false,
|
||||
showSkip: false,
|
||||
showCount: false,
|
||||
showLimit: true,
|
||||
showInput: false,
|
||||
showRefresh: false,
|
||||
}
|
||||
);
|
||||
const limits = ref(props.limits);
|
||||
const pages = props.pages / 2
|
||||
const inlimit = computed({ get() { return props.limit }, set(v: number) { emit('limit', v) } })
|
||||
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[] = [], 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;
|
||||
})
|
||||
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 === totalPage.value[totalPage.value.length - 1]) {
|
||||
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;
|
||||
// totalPage.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>
|
||||
Loading…
x
Reference in New Issue
Block a user