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, totalPage,
props: { maxPageShow } props: { maxPageShow }
} = vm } = vm
vm.currPage = vm.inputPage = currPage if (vm.currPage !== currPage) {
if (typeof vm.props.pageChanged === 'function') { vm.currPage = vm.inputPage = currPage
vm.props.pageChanged(currPage) if (typeof vm.props.pageChanged === 'function') {
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)
} }