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

新年的第一次提交

Browse Source
This commit is contained in:
就眠儀式
2022-02-01 07:23:20 +08:00
parent 5fe02df5db
commit 126d20bc3f
77 changed files with 1393 additions and 1297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/component/page/index.ts
View File

@@ -1,9 +1,8 @@
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../../types/index";
Component.install = (app: App) => {
app.component(Component.name || "LayPage", Component);
app.component(Component.name, Component);
};
export default Component as IDefineComponent;
export default Component;

138
src/component/page/index.vue
View File

@@ -1,70 +1,10 @@
<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>
<script lang="ts">
export default {
name: "LayPage"
}
</script>
<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"
@keypress.enter="jumpPage()"
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">
<script setup lang="ts">
import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
const slots = useSlots();
@@ -161,3 +101,69 @@ watch(currentPage, function () {
emit("jump", { current: currentPage.value });
});
</script>
<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 === 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"
@keypress.enter="jumpPage()"
type="number"
class="layui-input layui-input-number"
/>页
<button
type="button"
class="layui-laypage-btn"
@click="jumpPage()"
:disabled="currentPageShow > maxPage"
>
确定
</button>
</span>
</div>
</template>