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