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

优化pager组件

old
宇天 2018-06-22 03:07:48 +08:00
parent 6f6d495667
commit e9ca20f621
1 changed files with 24 additions and 13 deletions

View File

@ -42,10 +42,13 @@ function update(currPage, vm) {
totalPage,
props: { maxPageShow }
} = vm
vm.currPage = vm.inputPage = currPage
if (typeof vm.props.pageChanged === 'function') {
vm.props.pageChanged(currPage)
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)
}