mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-12 14:40:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: pagination!

Browse Source
This commit is contained in:
hrsonion 2019-06-22 19:33:26 +08:00
parent 70bd337d46
commit 4ee8529be5
4 changed files with 230 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
demo/components/paginationDemo.vue
View File

@ -1,10 +1,18 @@
<template>
<div class="doc">
<div
ref="doc"
class="doc"
>
<h1>分页 / n-pagination</h1>
<hr>
<h2>基本用法</h2>
<n-pagination v-model="page" />
<br>
<n-pagination
v-model="page"
:page-count="100"
/>
<br><br>
page: {{ page }}
<br><br>
<textarea rows="5">scaffold</textarea>
<hr>
</div>

169
packages/common/Pagination/src/main.vue
View File

@ -1,33 +1,128 @@
<template>
<div class="n-pagination">
<div>prev</div>
<div class="n-pagination__item" />
<div>next</div>
<div
class="n-pagination__item n-pagination__item--backward"
:class="{
'n-pagination__item--disabled': currentPage === 1
}"
@click="backward"
>
<div>
<n-icon type="ios-arrow-back" />
</div>
</div>
<div
v-for="pageItem in pageItems"
:key="pageItem.label"
class="n-pagination__item"
:class="{
'n-pagination__item--active': pageItem.active
}"
@click="dispatchPageChangeAction(pageItem)"
>
<div
v-if="pageItem.type==='page'"
class="n-pagination-item__label"
>
{{ pageItem.label }}
</div>
<div
v-if="pageItem.type==='fastBackward'"
class="n-pagination-item__fast-backward"
>
<div class="n-pagination-item__more-icon">
<n-icon type="ios-more" />
</div>
<div class="n-pagination-item__fast-backward-icon">
<n-icon type="ios-arrow-back" />
<n-icon type="ios-arrow-back" />
</div>
</div>
<div
v-if="pageItem.type==='fastForward'"
class="n-pagination-item__fast-forward"
>
<div class="n-pagination-item__more-icon">
<n-icon type="ios-more" />
</div>
<div class="n-pagination-item__fast-forward-icon">
<n-icon type="ios-arrow-forward" />
<n-icon type="ios-arrow-forward" />
</div>
</div>
</div>
<div
class="n-pagination__item n-pagination__item--forward"
:class="{
'n-pagination__item--disabled': currentPage === pageCount
}"
@click="forward"
>
<n-icon type="ios-arrow-forward" />
</div>
</div>
</template>
<script>
import { pagesToShow } from './utils'
import { pageItems } from './utils'
import NIcon from '../../Icon/index'
export default {
name: 'NPagination',
components: {
NIcon
},
model: {
prop: 'page',
event: 'changePage'
prop: 'currentPage',
event: 'change-current-page'
},
props: {
page: {
currentPage: {
type: Number,
required: true
},
totalPage: {
pageCount: {
type: Number,
required: true
}
},
computed: {
pageItems () {
return pagesToShow(this.page, this.totalPage)
return pageItems(this.currentPage, this.pageCount)
}
},
methods: {
dispatchPageChangeAction (pageItem) {
switch (pageItem.type) {
case 'page':
this.setCurrentPage(pageItem.label)
break
case 'fastBackward':
this.fastBackward()
break
case 'fastForward':
this.fastForward()
break
}
},
setCurrentPage (page) {
this.$emit('change-current-page', page)
},
forward () {
const currentPage = Math.min(this.currentPage + 1, this.pageCount)
this.$emit('change-current-page', currentPage)
},
backward () {
const currentPage = Math.max(this.currentPage - 1, 1)
this.$emit('change-current-page', currentPage)
},
fastForward () {
const currentPage = Math.min(this.currentPage + 5, this.pageCount)
this.$emit('change-current-page', currentPage)
},
fastBackward () {
const currentPage = Math.max(this.currentPage - 5, 1)
this.$emit('change-current-page', currentPage)
}
}
}
@ -35,9 +130,61 @@ export default {
<style lang="scss" scoped>
.n-pagination {
display: flex;
display: inline-flex;
.n-pagination__item {
cursor: pointer;
user-select: none;
color: #75819B;
min-width:28px;
height:28px;
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
&:not(:last-child) {
margin-right: 17px;
}
display: flex;
align-items: center;
justify-content: center;
border-radius:6px;
border:1px solid transparent;
&.n-pagination__item--active {
color: red;
background:rgba(99,226,183,0.3);
color: #63E2B7;
border:1px solid rgba(99,226,183,1);
}
&.n-pagination__item--backward, &.n-pagination__item--forward {
border:1px solid rgba(117,129,155,1);
&.n-pagination__item--disabled {
i::before {
color: rgba(44,55,78,1);
}
border:1px solid rgba(44,55,78,1);
cursor: not-allowed;
}
}
.n-pagination-item__fast-backward, .n-pagination-item__fast-forward {
.n-pagination-item__fast-backward-icon, .n-pagination-item__fast-forward-icon {
display: none;
}
.n-pagination-item__more-icon {
display: block;
}
}
&:hover {
.n-pagination-item__fast-backward, .n-pagination-item__fast-forward {
.n-pagination-item__more-icon {
display: none;
}
.n-pagination-item__fast-backward-icon, .n-pagination-item__fast-forward-icon {
display: block;
i::before {
color: #63E2B7;
}
}
}
}
}
}
</style>

60
packages/common/Pagination/src/utils.js
View File

@ -1,19 +1,24 @@
function pagesToShow (page, totalPage) {
if (totalPage === 1) return [1]
/**
*
* @param {number} currentPage
* @param {number} pageCount
*/
function pagesToShow (currentPage, pageCount) {
if (pageCount === 1) return [1]
const firstPage = 1
const lastPage = totalPage
let middleStart = page
let middleEnd = page
if (firstPage === page) {
const lastPage = pageCount
let middleStart = currentPage
let middleEnd = currentPage
if (firstPage === currentPage) {
middleEnd += 4
} else if (firstPage + 1 === page) {
} else if (firstPage + 1 === currentPage) {
middleEnd += 3
} else {
middleEnd += 2
}
if (lastPage === page) {
if (lastPage === currentPage) {
middleStart -= 4
} else if (lastPage - 1 === page) {
} else if (lastPage - 1 === currentPage) {
middleStart -= 3
} else {
middleStart -= 2
@ -25,7 +30,7 @@ function pagesToShow (page, totalPage) {
const items = []
items.push(firstPage)
if (leftSplit) {
items.push(-1)
items.push(-2)
}
for (let i = Math.max(middleStart, firstPage + 1); i <= middleEnd && i < lastPage; ++i) {
items.push(i)
@ -37,4 +42,37 @@ function pagesToShow (page, totalPage) {
return items
}
export { pagesToShow }
function pageItems (currentPage, pageCount) {
const pages = pagesToShow(currentPage, pageCount)
const items = pages.map(page => {
switch (page) {
case -2:
return {
type: 'fastBackward',
label: 'fastBackward'
}
case -1:
return {
type: 'fastForward',
label: 'fastForward'
}
default:
if (page === currentPage) {
return {
type: 'page',
label: page,
active: true
}
} else {
return {
type: 'page',
label: page,
activa: false
}
}
}
})
return items
}
export { pagesToShow, pageItems }

24
test/unit/specs/packages/common/Pagination/util.spec.js
View File

@ -30,30 +30,30 @@ describe('#Pagination Utils', function () {
expect(pagesToShow(2, 7)).to.deep.equal([1, 2, 3, 4, 5, -1, 7])
expect(pagesToShow(3, 7)).to.deep.equal([1, 2, 3, 4, 5, -1, 7])
expect(pagesToShow(4, 7)).to.deep.equal([1, 2, 3, 4, 5, 6, 7])
expect(pagesToShow(5, 7)).to.deep.equal([1, -1, 3, 4, 5, 6, 7])
expect(pagesToShow(6, 7)).to.deep.equal([1, -1, 3, 4, 5, 6, 7])
expect(pagesToShow(7, 7)).to.deep.equal([1, -1, 3, 4, 5, 6, 7])
expect(pagesToShow(5, 7)).to.deep.equal([1, -2, 3, 4, 5, 6, 7])
expect(pagesToShow(6, 7)).to.deep.equal([1, -2, 3, 4, 5, 6, 7])
expect(pagesToShow(7, 7)).to.deep.equal([1, -2, 3, 4, 5, 6, 7])
})
it('should work when totalPage is 8', function () {
expect(pagesToShow(1, 8)).to.deep.equal([1, 2, 3, 4, 5, -1, 8])
expect(pagesToShow(2, 8)).to.deep.equal([1, 2, 3, 4, 5, -1, 8])
expect(pagesToShow(3, 8)).to.deep.equal([1, 2, 3, 4, 5, -1, 8])
expect(pagesToShow(4, 8)).to.deep.equal([1, 2, 3, 4, 5, 6, -1, 8])
expect(pagesToShow(5, 8)).to.deep.equal([1, -1, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(6, 8)).to.deep.equal([1, -1, 4, 5, 6, 7, 8])
expect(pagesToShow(7, 8)).to.deep.equal([1, -1, 4, 5, 6, 7, 8])
expect(pagesToShow(8, 8)).to.deep.equal([1, -1, 4, 5, 6, 7, 8])
expect(pagesToShow(5, 8)).to.deep.equal([1, -2, 3, 4, 5, 6, 7, 8])
expect(pagesToShow(6, 8)).to.deep.equal([1, -2, 4, 5, 6, 7, 8])
expect(pagesToShow(7, 8)).to.deep.equal([1, -2, 4, 5, 6, 7, 8])
expect(pagesToShow(8, 8)).to.deep.equal([1, -2, 4, 5, 6, 7, 8])
})
it('should work when totalPage is 9', function () {
expect(pagesToShow(1, 9)).to.deep.equal([1, 2, 3, 4, 5, -1, 9])
expect(pagesToShow(2, 9)).to.deep.equal([1, 2, 3, 4, 5, -1, 9])
expect(pagesToShow(3, 9)).to.deep.equal([1, 2, 3, 4, 5, -1, 9])
expect(pagesToShow(4, 9)).to.deep.equal([1, 2, 3, 4, 5, 6, -1, 9])
expect(pagesToShow(5, 9)).to.deep.equal([1, -1, 3, 4, 5, 6, 7, -1, 9])
expect(pagesToShow(6, 9)).to.deep.equal([1, -1, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(7, 9)).to.deep.equal([1, -1, 5, 6, 7, 8, 9])
expect(pagesToShow(8, 9)).to.deep.equal([1, -1, 5, 6, 7, 8, 9])
expect(pagesToShow(9, 9)).to.deep.equal([1, -1, 5, 6, 7, 8, 9])
expect(pagesToShow(5, 9)).to.deep.equal([1, -2, 3, 4, 5, 6, 7, -1, 9])
expect(pagesToShow(6, 9)).to.deep.equal([1, -2, 4, 5, 6, 7, 8, 9])
expect(pagesToShow(7, 9)).to.deep.equal([1, -2, 5, 6, 7, 8, 9])
expect(pagesToShow(8, 9)).to.deep.equal([1, -2, 5, 6, 7, 8, 9])
expect(pagesToShow(9, 9)).to.deep.equal([1, -2, 5, 6, 7, 8, 9])
})
})
})