优化pager组件
parent
6f6d495667
commit
e9ca20f621
|
@ -42,10 +42,13 @@ function update(currPage, vm) {
|
|||
totalPage,
|
||||
props: { maxPageShow }
|
||||
} = vm
|
||||
if (vm.currPage !== currPage) {
|
||||
vm.currPage = vm.inputPage = currPage
|
||||
if (typeof vm.props.pageChanged === 'function') {
|
||||
vm.props.pageChanged(currPage)
|
||||
}
|
||||
}
|
||||
|
||||
vm.pageList.clear()
|
||||
if (totalPage > 1) {
|
||||
vm.pageList.pushArray(calculate({ currPage, totalPage, maxPageShow }))
|
||||
|
@ -59,22 +62,22 @@ const tmpls = {
|
|||
:css="{'border-radius': props.radius}"
|
||||
:attr="{disabled: currPage === 1}"
|
||||
:data="{to: parseUrl(1)}"
|
||||
:click="setPage(1, $event)"></button>`,
|
||||
:click="go(1, $event)"></button>`,
|
||||
end: `<button class="do-icon-dbl-right button"
|
||||
:css="{'border-radius': props.radius}"
|
||||
:attr="{disabled: currPage === totalPage}"
|
||||
:data="{to: parseUrl(totalPage)}"
|
||||
:click="setPage(totalPage, $event)"></button>`,
|
||||
:click="go(totalPage, $event)"></button>`,
|
||||
prev: `<button class="do-icon-left button"
|
||||
:css="{'border-radius': props.radius}"
|
||||
:attr="{disabled: currPage < 2}"
|
||||
:data="{to: parseUrl(currPage - 1)}"
|
||||
:click="setPage(currPage - 1, $event)"></button>`,
|
||||
:click="go(currPage - 1, $event)"></button>`,
|
||||
next: `<button class="do-icon-right button"
|
||||
:css="{'border-radius': props.radius}"
|
||||
:attr="{disabled: currPage >= totalPage}"
|
||||
:data="{to: parseUrl(currPage + 1)}"
|
||||
:click="setPage(currPage + 1, $event)"></button>`,
|
||||
:click="go(currPage + 1, $event)"></button>`,
|
||||
pager: `<button class="page"
|
||||
:repeat="pageList"
|
||||
:css="{'border-radius': props.radius}"
|
||||
|
@ -82,11 +85,11 @@ const tmpls = {
|
|||
:data="{to: parseUrl(el)}"
|
||||
:class="{disabled: '...' === el, curr: currPage === el}"
|
||||
:text="el"
|
||||
:click="setPage(el, $event)"></button>`,
|
||||
:click="go(el, $event)"></button>`,
|
||||
curr: `<button class="page curr" :text="currPage"></button>`,
|
||||
total: `<span class="total-box">共 {{totalPage}} 页 {{totalItem}} 条</span>`,
|
||||
jumper: `<div class="input-box">前往
|
||||
<input type="text" :duplex="inputPage" :keyup="setPage(null, $event)"> 页
|
||||
<input type="text" :duplex="inputPage" :keyup="go(null, $event)"> 页
|
||||
</div>`,
|
||||
slot: ''
|
||||
}
|
||||
|
@ -186,7 +189,7 @@ export default Anot.component('pager', {
|
|||
skip: ['classList'],
|
||||
methods: {
|
||||
// 格式化页码的URL
|
||||
parseUrl: function(val) {
|
||||
parseUrl(val) {
|
||||
val = val >>> 0
|
||||
if (val < 1 || !this.props.url || this.currPage === val) {
|
||||
return ''
|
||||
|
@ -194,7 +197,7 @@ export default Anot.component('pager', {
|
|||
return this.props.url.replace('{id}', val)
|
||||
},
|
||||
// 设置页码
|
||||
setPage: function(val, ev) {
|
||||
go(val, ev) {
|
||||
let { inputPage, totalPage, currPage } = this
|
||||
let elem = (ev && ev.target) || null
|
||||
if ((elem && elem.disabled) || currPage === val) {
|
||||
|
@ -231,11 +234,19 @@ export default Anot.component('pager', {
|
|||
}
|
||||
}
|
||||
},
|
||||
setPageSize: function(num) {
|
||||
setSize(num) {
|
||||
num = +num
|
||||
if (this.pageSize === num) {
|
||||
return
|
||||
}
|
||||
this.pageSize = +num
|
||||
update(1, this)
|
||||
},
|
||||
setTotalItems: function(num) {
|
||||
setTotal(num) {
|
||||
num = +num
|
||||
if (this.totalItem === num) {
|
||||
return
|
||||
}
|
||||
this.totalItem = +num
|
||||
update(1, this)
|
||||
}
|
||||
|
|
Reference in New Issue