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

feat(page): add page component

Browse Source
This commit is contained in:
就眠仪式 2021-10-09 15:48:47 +08:00
parent b3538eba74
commit b4ff364b49
2 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/zh-CN/components/page.md
View File

@ -1,7 +1,7 @@
::: demo ::: demo
<template> <template>
<lay-page></lay-page> <lay-page limit=10 total=100></lay-page>
</template> </template>
<script> <script>

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

@ -1,26 +1,19 @@
<template> <template>
<div <div class="layui-box layui-laypage layui-laypage-default">
class="layui-box layui-laypage layui-laypage-default"
id="layui-laypage-10"
>
<span class="layui-laypage-count">共 {{ total }} 条</span <span class="layui-laypage-count">共 {{ total }} 条</span
><a ><a href="javascript:;" class="layui-laypage-prev" :class="[currentPage === 1 ? 'layui-disabled':'']" @click="prev()"
href="javascript:;"
class="layui-laypage-prev layui-disabled"
@click="prev"
>上一页</a >上一页</a
><span class="layui-laypage-curr"
><em class="layui-laypage-em"></em><em>1</em></span
> >
<a href="javascript:;" data-page="5">5</a> <template v-for="index of totalPage" :key="index">
<span class="layui-laypage-spr">…</span <span class="layui-laypage-curr" v-if="index === currentPage"
><a ><em class="layui-laypage-em"></em><em>{{ index }}</em></span
href="javascript:;" >
class="layui-laypage-last" <a href="javascript:;" @click="jump(index)" v-else>
title="尾页" {{ index }}
data-page="10" </a>
>10</a </template>
><a href="javascript:;" class="layui-laypage-next" @click="next()">下一页</a
<a href="javascript:;" class="layui-laypage-next" :class="[currentPage === totalPage ? 'layui-disabled':'']" @click="next()">下一页</a
><span class="layui-laypage-limits" ><span class="layui-laypage-limits"
><select lay-ignore=""> ><select lay-ignore="">
<option value="10" selected="">{{ limit }} 条/页</option> <option value="10" selected="">{{ limit }} 条/页</option>
@ -41,8 +34,8 @@
> >
</div> </div>
</template> </template>
<script setup name="LayPage"></script>
<script setup name="LayPage" lang="ts"> <script setup lang="ts">
import { defineProps, ref } from 'vue' import { defineProps, ref } from 'vue'
const props = const props =
@ -51,13 +44,24 @@ const props =
limit: number limit: number
}>() }>()
const current = ref(1) const totalPage = ref(props.total / props.limit)
const currentPage = ref(1)
const prev = function () { const prev = function () {
current.value-- if(currentPage.value === 1) {
return
}
currentPage.value--
} }
const next = function () { const next = function () {
current.value-- if(currentPage.value === totalPage.value) {
return
}
currentPage.value++
}
const jump = function (page: number) {
currentPage.value = page
} }
</script> </script>