This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化分页组件

old
宇天 2017-12-25 01:28:32 +08:00
parent 84f138e9f5
commit ea3b19b1c6
2 changed files with 23 additions and 10 deletions

View File

@ -12,6 +12,9 @@ function calculate({ currPage, maxPageShow, totalPages }) {
? maxPageShow - currPage ? maxPageShow - currPage
: Math.floor(maxPageShow / 2) : Math.floor(maxPageShow / 2)
if (totalPages < 2) {
return arr
}
if (currPage - halfPage > 1) { if (currPage - halfPage > 1) {
arr.push('...') arr.push('...')
} }
@ -35,12 +38,15 @@ function calculate({ currPage, maxPageShow, totalPages }) {
// 更新组件 // 更新组件
function update(currPage, vm) { function update(currPage, vm) {
const { totalPages, props } = vm const { totalPages, props } = vm
vm.currPage = vm.inputPage = currPage
vm.props.onPageChange.call(null, currPage)
if (totalPages < 2) {
return
}
vm.pageList.clear() vm.pageList.clear()
vm.pageList.pushArray( vm.pageList.pushArray(
calculate({ currPage, totalPages, maxPageShow: props.maxPageShow }) calculate({ currPage, totalPages, maxPageShow: props.maxPageShow })
) )
vm.currPage = vm.inputPage = currPage
vm.props.onPageChange.call(null, currPage)
} }
export default Anot.component('pages', { export default Anot.component('pages', {
@ -55,9 +61,6 @@ export default Anot.component('pages', {
return tpl return tpl
}, },
componentWillMount: function() { componentWillMount: function() {
if (this.totalPages < 2) {
return
}
const { currPage, totalPages, props } = this const { currPage, totalPages, props } = this
this.pageList.clear() this.pageList.clear()
this.pageList.pushArray( this.pageList.pushArray(
@ -69,9 +72,8 @@ export default Anot.component('pages', {
}, },
state: { state: {
currPage: 1, currPage: 1,
totalItems: 1000, totalItems: 1,
pageSize: 20, pageSize: 20,
inputPage: 1, inputPage: 1,
pageList: [] pageList: []
}, },
@ -80,6 +82,7 @@ export default Anot.component('pages', {
return Math.ceil(this.totalItems / this.pageSize) return Math.ceil(this.totalItems / this.pageSize)
} }
}, },
skip: ['currPage', 'totalItems', 'pageSize'],
props: { props: {
url: null, url: null,
btns: { btns: {
@ -124,9 +127,18 @@ export default Anot.component('pages', {
} }
} else { } else {
if (val === null) { if (val === null) {
this.inputPage = this.inputPage >>> 0 || 1 let { inputPage, totalPages, currPage } = this
inputPage = inputPage >>> 0
if (ev && ev.keyCode === 13) { if (ev && ev.keyCode === 13) {
update(this.inputPage, this) if (inputPage < 1 || currPage === inputPage) {
return (this.inputPage = currPage)
}
if (inputPage > totalPages) {
inputPage = totalPages
}
this.inputPage = inputPage
update(inputPage, this)
} }
} else { } else {
val = val >>> 0 val = val >>> 0
@ -139,6 +151,7 @@ export default Anot.component('pages', {
update(1, this) update(1, this)
}, },
setTotalItems: function(num) { setTotalItems: function(num) {
console.log(this, num)
this.totalItems = +num this.totalItems = +num
update(1, this) update(1, this)
} }

View File

@ -28,7 +28,7 @@
.input-box, .input-box,
.input-box span, .input-box span,
.input-box input {display:inline-block;} .input-box input {display:inline-block;}
.input-box input {width:30px;height:30px;padding:0 3px;background:#fff;border:1px solid #ddd;text-align:center;} .input-box input {width:40px;height:30px;padding:0 3px;background:#fff;border:1px solid #ddd;text-align:center;}
} }
&.skin-2 {float:right;width:auto; &.skin-2 {float:right;width:auto;