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

feat(page): 完善 page 组件

Browse Source
This commit is contained in:
就眠仪式 2021-10-09 22:20:55 +08:00
parent a1ddef595b
commit 0b89191414
3 changed files with 143 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,71 @@
::: demo
<template>
<lay-page limit=20 total=100></lay-page>
<lay-page limit=20 total=100 showPage></lay-page>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: demo
<template>
<lay-page limit=20 total=100 ></lay-page>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: demo
<template>
<lay-page limit=20 total=100 showPage theme="red"></lay-page>
<br>
<lay-page limit=20 total=100 showPage theme="blue"></lay-page>
<br>
<lay-page limit=20 total=100 showPage theme="orange"></lay-page>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
:::
::: demo
<template>
<lay-page limit=20 total=100 showCount showPage showLimit showRefresh showSkip></lay-page>
</template>
<script>

9
src/css/layui.css
View File

@ -2493,6 +2493,15 @@ a cite {
width: 100%
}
.layui-input-number[type="number"]{
-moz-appearance: textfield;
}
.layui-input-number::-webkit-outer-spin-button,
.layui-input-number::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.layui-input,
.layui-select,
.layui-textarea {

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

@ -1,63 +1,96 @@
<template>
<div class="layui-box layui-laypage layui-laypage-default">
<span class="layui-laypage-count">共 {{ total }} 条</span
><a href="javascript:;" class="layui-laypage-prev" :class="[currentPage === 1 ? 'layui-disabled':'']" @click="prev()"
<span class="layui-laypage-count" v-if="showCount">共 {{ total }} 条</span
><a
href="javascript:;"
class="layui-laypage-prev"
:class="[currentPage === 1 ? 'layui-disabled' : '']"
@click="prev()"
>上一页</a
>
<template v-for="index of totalPage" :key="index">
<span class="layui-laypage-curr" v-if="index === currentPage"
><em class="layui-laypage-em"></em><em>{{ index }}</em></span
>
<a href="javascript:;" @click="jump(index)" v-else>
{{ index }}
</a>
<template v-if="showPage">
<template v-for="index of totalPage" :key="index">
<span class="layui-laypage-curr" v-if="index === currentPage"
><em
class="layui-laypage-em"
:class="[theme ? 'layui-bg-' + theme : '']"
></em
><em>{{ index }}</em></span
>
<a href="javascript:;" @click="jump(index)" v-else>
{{ index }}
</a>
</template>
</template>
<a href="javascript:;" class="layui-laypage-next" :class="[currentPage === totalPage ? 'layui-disabled':'']" @click="next()">下一页</a
><span class="layui-laypage-limits"
<a
href="javascript:;"
class="layui-laypage-next"
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
@click="next()"
>下一页</a
><span class="layui-laypage-limits" v-if="showLimit"
><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>
<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 href="javascript:;" data-page="1" class="layui-laypage-refresh"
><a href="javascript:;" v-if="showRefresh" class="layui-laypage-refresh"
><i class="layui-icon layui-icon-refresh"></i></a
><span class="layui-laypage-skip"
>到第<input type="text" v-model="currentPageShow" class="layui-input" />页<button
type="button"
class="layui-laypage-btn"
@click="jumpPage()"
>
><span class="layui-laypage-skip" v-if="showSkip"
>到第<input
type="number"
v-model="currentPageShow"
class="layui-input layui-input-number"
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
确定
</button></span>
</button></span
>
</div>
</template>
<script setup name="LayPage"></script>
<script setup lang="ts">
import { defineProps, ref, watch } from 'vue'
import { defineProps, Ref, ref, watch } from 'vue'
const props =
const props = withDefaults(
defineProps<{
total: number
limit: number
}>()
theme: boolean
showPage: boolean
showSkip: boolean
showCount: boolean
showLimit: boolean
showInput: boolean
showRefresh: boolean
}>(),
{
limit: 10,
showSkip: false,
showPage: false,
showCount: false,
showLimit: false,
showInput: false,
showRefresh: false,
}
)
const inlimit= ref(props.limit)
const inlimit = ref(props.limit)
const totalPage = ref(Math.ceil(props.total / inlimit.value))
const currentPage = ref(1)
const currentPageShow = ref(currentPage.value)
const currentPage: Ref<number> = ref(1)
const currentPageShow: Ref<number> = ref(currentPage.value)
const prev = function () {
if(currentPage.value === 1) {
if (currentPage.value === 1) {
return
}
currentPage.value--
}
const next = function () {
if(currentPage.value === totalPage.value) {
if (currentPage.value === totalPage.value) {
return
}
currentPage.value++
@ -67,19 +100,16 @@ const jump = function (page: number) {
currentPage.value = page
}
const jumpPage = function() {
const jumpPage = function () {
currentPage.value = currentPageShow.value
}
watch(inlimit, function() {
watch(inlimit, function () {
currentPage.value = 1
totalPage.value = Math.ceil(props.total / inlimit.value)
})
watch(currentPage, function() {
watch(currentPage, function () {
currentPageShow.value = currentPage.value
})
</script>