优化分页组件
parent
84f138e9f5
commit
ea3b19b1c6
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Reference in New Issue