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

重构分页组件

old
宇天 2018-01-27 03:47:44 +08:00
parent b460410b68
commit 0b47e23e96
2 changed files with 228 additions and 131 deletions

View File

@ -4,7 +4,7 @@ import './main.scss'
Anot.ui.pager = '1.0.0' Anot.ui.pager = '1.0.0'
//计算页码列表 //计算页码列表
function calculate({ currPage, maxPageShow, totalPages }) { function calculate({ currPage, maxPageShow, totalPage }) {
let arr = [] let arr = []
let fixNum = 0 let fixNum = 0
let halfPage = let halfPage =
@ -12,87 +12,135 @@ function calculate({ currPage, maxPageShow, totalPages }) {
? maxPageShow - currPage ? maxPageShow - currPage
: Math.floor(maxPageShow / 2) : Math.floor(maxPageShow / 2)
if (totalPages < 2) { if (totalPage < 2) {
return arr return arr
} }
if (currPage - halfPage > 1) { if (currPage - halfPage > 1) {
arr.push('...') arr.push('...')
} }
if (totalPages - currPage < halfPage) { if (totalPage - currPage < halfPage) {
fixNum = halfPage - totalPages + currPage fixNum = halfPage - totalPage + currPage
} }
for ( for (
let i = currPage - halfPage - fixNum; let i = currPage - halfPage - fixNum;
i < currPage + halfPage + 1 && i <= totalPages; i < currPage + halfPage + 1 && i <= totalPage;
i++ i++
) { ) {
if (i > 0) { if (i > 0) {
arr.push(i) arr.push(i)
} }
} }
if (currPage + halfPage < totalPages) { if (currPage + halfPage < totalPage) {
arr.push('...') arr.push('...')
} }
return arr return arr
} }
// 更新组件 // 更新组件
function update(currPage, vm) { function update(currPage, vm) {
const { totalPages, props: { maxPageShow } } = vm const { totalPage, props: { maxPageShow } } = vm
vm.currPage = vm.inputPage = currPage vm.currPage = vm.inputPage = currPage
vm.props.onPageChange(currPage) if (typeof vm.props.onPageChange === 'function') {
vm.pageList.clear() vm.props.onPageChange(currPage)
if (totalPages > 1) {
vm.pageList.pushArray(calculate({ currPage, totalPages, maxPageShow }))
} }
vm.pageList.clear()
if (totalPage > 1) {
vm.pageList.pushArray(calculate({ currPage, totalPage, maxPageShow }))
}
}
const tmpls = {
home: `<button class="do-ui-font button home"
:css="{'border-radius': props.radius}"
:attr-disabled="currPage === 1"
:data="{to: parseUrl(1)}"
:click="setPage(1, $event)"></button>`,
end: `<button class="do-ui-font button end"
:css="{'border-radius': props.radius}"
:attr-disabled="currPage === totalPage"
:data="{to: parseUrl(totalPage)}"
:click="setPage(totalPage, $event)"></button>`,
prev: `<button class="do-ui-font button prev"
:css="{'border-radius': props.radius}"
:attr-disabled="{disabled: currPage < 2}"
:data="{to: parseUrl(currPage - 1)}"
:click="setPage(currPage - 1, $event)"></button>`,
next: `<button class="do-ui-font button next"
:css="{'border-radius': props.radius}"
:attr-disabled="{disabled: currPage >= totalPage}"
:data="{to: parseUrl(currPage + 1)}"
:click="setPage(currPage + 1, $event)"></button>`,
pager: `<button class="page"
:repeat="pageList"
:css="{'border-radius': props.radius}"
:attr-disabled="{disabled: '...' === el || currPage === el}"
:data="{to: parseUrl(el)}"
:class="{disabled: '...' === el, curr: currPage === el}"
:text="el"
:click="setPage(el, $event)"></button>`,
curr: `<button class="page curr" :text="currPage"></button>`,
total: `<span class="total-box">共 {{totalPage}} 页 {{totalItems}} 条</span>`,
jumper: `<div class="input-box">前往
<input type="text" :duplex="inputPage" :keyup="setPage(null, $event)">
</div>`
} }
export default Anot.component('pager', { export default Anot.component('pager', {
construct: function(props, state) { construct: function(props, state) {
props.className = props.theme = +props.theme || 1
'skin-' + (props.theme || 1) + ' ' + (props.color || 'plain') if (props.simpleMode) {
delete props.theme props.theme = 1
}
state.classList = state.classList.concat(
'skin-' + props.theme,
props.color || 'plain',
props.size || 'mini'
)
if (props.total) {
state.totalItems = +props.total
}
if (props.pageSize) {
state.pageSize = +props.pageSize
}
if (!props.layout) {
props.layout = 'total,home,prev,pager,next,end,jumper'
}
if (props.theme === 2) {
props.radius = null
}
delete props.total
delete props.pageSize
delete props.color delete props.color
delete props.size
}, },
render: function() { render: function() {
let { layout, theme, simpleMode } = this.props
if (simpleMode) {
layout = ['prev', 'curr', 'next']
} else {
layout = layout.replace(/\s/g, '')
if (theme === 2) {
layout = layout.replace(/total|jumper/g, '')
}
layout = layout.split(',')
}
layout = layout.map(it => tmpls[it] || '')
return ` return `
<div class="do-pager do-fn-noselect" :class="{{props.className}}"> <div
<a class="normal" class="do-pager do-fn-noselect"
:if="currPage > 1 && !props.simpleMode" :class="{{classList.join(' ')}}">
:attr="{href: parseUrl(1)}" ${layout.join('\n')}
:text="props.btns.home"
:click="setPage(1, $event)"></a>
<a class="normal"
:if="currPage > 1"
:attr="{href: parseUrl(currPage - 1)}"
:text="props.btns.prev"
:click="setPage(currPage - 1, $event)"></a>
<a :if-loop="!props.simpleMode || currPage === el"
:repeat="pageList"
:attr="{href: parseUrl(el)}"
:class="{normal: currPage !== el, disabled: '...' === el, curr: currPage === el}"
:text="el"
:click="setPage(el, $event)"></a>
<a class="normal"
:if="currPage < totalPages"
:attr="{href: parseUrl(currPage + 1)}"
:click="setPage(currPage + 1, $event)">{{props.btns.next}}</a>
<a class="normal"
:if="currPage < totalPages && !props.simpleMode"
:attr="{href: parseUrl(totalPages)}"
:click="setPage(totalPages, $event)">{{props.btns.end}}</a>
<div class="input-box" :if="!props.simpleMode && totalPages > 1">
<span> {{totalPages}} {{totalItems}} 前往</span>
<input type="text" :duplex="inputPage" :keyup="setPage(null, $event)">
<span></span>
</div>
</div>` </div>`
}, },
componentWillMount: function() { componentWillMount: function() {
const { currPage, totalPages, props } = this const { currPage, totalPage, props } = this
this.pageList.clear() this.pageList.clear()
this.pageList.pushArray( this.pageList.pushArray(
calculate({ currPage, totalPages, maxPageShow: props.maxPageShow }) calculate({ currPage, totalPage, maxPageShow: props.maxPageShow })
) )
}, },
componentDidMount: function() { componentDidMount: function() {
@ -101,6 +149,7 @@ export default Anot.component('pager', {
} }
}, },
state: { state: {
classList: [],
currPage: 1, currPage: 1,
totalItems: 1, totalItems: 1,
pageSize: 20, pageSize: 20,
@ -108,63 +157,56 @@ export default Anot.component('pager', {
pageList: [] pageList: []
}, },
computed: { computed: {
totalPages: function() { totalPage: function() {
return Math.ceil(this.totalItems / this.pageSize) return Math.ceil(this.totalItems / this.pageSize)
} }
}, },
props: { props: {
url: null, url: null,
btns: {
prev: '<<',
next: '>>',
home: '首页',
end: '末页'
},
maxPageShow: 5, maxPageShow: 5,
className: '',
simpleMode: !1, simpleMode: !1,
onPageChange: Anot.noop, radius: 3,
onCreated: Anot.noop onPageChange: Anot.PropsTypes.isFunction(),
onCreated: Anot.PropsTypes.isFunction()
}, },
skip: ['classList'],
methods: { methods: {
// 格式化页码的URL // 格式化页码的URL
parseUrl: function(val) { parseUrl: function(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 'javascript:;' return ''
} }
return this.props.url.replace('{id}', val) return this.props.url.replace('{id}', val)
}, },
// 设置页码 // 设置页码
setPage: function(val, ev) { setPage: function(val, ev) {
if (this.currPage === val) { let { inputPage, totalPage, currPage } = this
let elem = (ev && ev.target) || null
if ((elem && elem.disabled) || currPage === val) {
return return
} }
let elem = (ev && ev.target) || null if (elem) {
if (val && elem) {
if (val && val !== '...') { if (val && val !== '...') {
let link = let link = elem.dataset.to
(elem && elem.getAttribute('href')) ||
elem.getAttribute('xlink:href')
if ('javascript:;' !== link) { if (link) {
location.href = link location.href = link
} else { } else {
val = val >> 0 val = val >>> 0
update(val, this)
} }
update(val, this)
} }
} else { } else {
if (val === null) { if (val === null) {
let { inputPage, totalPages, currPage } = this
inputPage = inputPage >>> 0 inputPage = inputPage >>> 0
if (ev && ev.keyCode === 13) { if (ev && ev.keyCode === 13) {
if (inputPage < 1 || currPage === inputPage) { if (inputPage < 1 || currPage === inputPage) {
return (this.inputPage = currPage) return (this.inputPage = currPage)
} }
if (inputPage > totalPages) { if (inputPage > totalPage) {
inputPage = totalPages inputPage = totalPage
} }
this.inputPage = inputPage this.inputPage = inputPage
update(inputPage, this) update(inputPage, this)

View File

@ -8,87 +8,142 @@
@import "var.scss"; @import "var.scss";
.do-pager {height:auto;text-align:center;font-size:13px;color: nth($cgr, 1); .do-pager {height:auto;text-align:center;font-size:14px;color: nth($cgr, 1);
a {display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color: nth($cgr, 1);text-decoration:none;cursor:pointer;} &.mini {line-height:35px;
a.curr, a.disabled {cursor:default;} .button,.page {min-width:35px;height:35px}
}
&.medium {line-height:40px;
.button,.page {min-width:40px;height:40px}
}
&.large {line-height:45px;
.button,.page {min-width:45px;height:45px}
}
.button,.page {display:inline-block;border:0;color: nth($cgr, 1);text-decoration:none;cursor:pointer;vertical-align:top;font-size:14px;font-weight:100;
&.home::after {content:"\e652";font-size:18px;}
&.prev::after {content:"\e659";font-size:18px;}
&.next::after {content:"\e658";font-size:18px;}
&.end::after {content:"\e653";font-size:18px;}
}
.curr, .disabled {cursor:default;}
&.skin-1 {width:100%; &.skin-1 {width:100%;
a.normal, .page,
a.disabled, .button,
a.curr {padding:0 10px;margin:0 3px;} .disabled,
.curr {padding:0 8px;margin:0 3px;}
a.curr {font-weight:bold;font-size:15px;} .curr {font-weight:bold;font-size:15px;}
a.disabled {min-width:0;padding:0;background:none;color:nth($cgr, 1); .page.disabled {min-width:0;padding:0;background:none;color:nth($cgr, 1);
&:hover,&:active {background:none;} &:hover,&:active {background:none;}
} }
.page.curr {background:none;color:nth($cgr, 1);
&:hover,&:active {background:none;}
}
.button[disabled] {cursor:not-allowed;}
.input-box, .total-box,.input-box {display:inline-block;padding:0 8px;}
.input-box span, .input-box input {display:inline-block;width:40px;height:30px;padding:0 3px;font-size:14px;background:#fff;border:1px solid #ddd;text-align:center;}
.input-box input {display:inline-block;}
.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;
a.normal, .page,
a.disabled, .button,
a.curr {float:left;margin:0;padding:0 5px;color:#fff;} .disabled,
.curr {float:left;margin:0;padding:0 5px;color:#fff;}
a.disabled {display:none;} .page.disabled {display:none;}
.button[disabled] {cursor:not-allowed;}
.input-box {display:none;} .input-box {display:none;}
} }
&.plain a.normal {background:nth($cp, 1);color:nth($cgr, 1);} &.plain {
&.plain a.normal:hover {background:nth($cp, 2)} .page,.button {background:nth($cp, 1);color:nth($cgr, 1);
&.skin-2.plain a.curr,
&.plain a.normal:active {background:nth($cp, 3)}
&.grey a.normal {background:nth($cgr, 1);color: #fff;} &:hover {background:nth($cp, 2)}
&.grey a.normal:hover {background:nth($cgr, 2)} &:active {background:nth($cp, 3)}
&.skin-2.grey a.curr,
&.grey a.normal:active {background:nth($cgr, 3)}
&.red a.normal {background:nth($cr, 1);color: #fff;}
&.red a.normal:hover {background:nth($cr, 2)}
&.skin-2.red a.curr,
&.red a.normal:active {background:nth($cr, 3)}
&.orange a.normal {background:nth($co, 1);color: #fff;}
&.orange a.normal:hover {background:nth($co, 2)}
&.skin-2.orange a.curr,
&.orange a.normal:active {background:nth($co, 3)}
&.green a.normal {background:nth($cg, 1);color: #fff;}
&.green a.normal:hover {background:nth($cg, 2)}
&.skin-2.green a.curr,
&.green a.normal:active {background:nth($cg, 3)}
&.teal a.normal {background:nth($ct, 1);color: #fff;}
&.teal a.normal:hover {background:nth($ct, 2)}
&.skin-2.teal a.curr,
&.teal a.normal:active {background:nth($ct, 3)}
&.blue a.normal {background:nth($cb, 1);color: #fff;}
&.blue a.normal:hover {background:nth($cb, 2)}
&.skin-2.blue a.curr,
&.blue a.normal:active {background:nth($cb, 3)}
&.purple a.normal {background:nth($cpp, 1);color: #fff;}
&.purple a.normal:hover {background:nth($cpp, 2)}
&.skin-2.purple a.curr,
&.purple a.normal:active {background:nth($cpp, 3)}
&.skin-1 {
a.disabled {background:none;color:nth($cgr, 1);
&:hover,&:active {background:none;}
} }
.button[disabled] {background:nth($cp, 1);}
&.skin-2 .curr {background:nth($cp, 3)}
} }
&.grey {
.page,.button {background:nth($cgr, 1);color: #fff;
&:hover {background:nth($cgr, 2)}
&:active {background:nth($cgr, 3)}
}
.button[disabled] {background:nth($cgr, 1);}
&.skin-2 .curr {background:nth($cgr, 3)}
}
&.red {
.page,.button {background:nth($cr, 1);color: #fff;
&:hover {background:nth($cr, 2)}
&:active {background:nth($cr, 3)}
}
.button[disabled] {background:nth($cr, 1);}
&.skin-2 .curr {background:nth($cr, 3)}
}
&.orange {
.page,.button {background:nth($co, 1);color: #fff;
&:hover {background:nth($co, 2)}
&:active {background:nth($co, 3)}
}
.button[disabled] {background:nth($co, 1);}
&.skin-2 .curr {background:nth($co, 3)}
}
&.green {
.page,.button {background:nth($cg, 1);color: #fff;
&:hover {background:nth($cg, 2)}
&:active {background:nth($cg, 3)}
}
.button[disabled] {background:nth($cg, 1);}
&.skin-2 .curr {background:nth($cg, 3)}
}
&.teal {
.page,.button {background:nth($ct, 1);color: #fff;
&:hover {background:nth($ct, 2)}
&:active {background:nth($ct, 3)}
}
.button[disabled] {background:nth($ct, 1);}
&.skin-2 .curr {background:nth($ct, 3)}
}
&.blue {
.page,.button {background:nth($cb, 1);color: #fff;
&:hover {background:nth($cb, 2)}
&:active {background:nth($cb, 3)}
}
.button[disabled] {background:nth($cb, 1);}
&.skin-2 .curr {background:nth($cb, 3)}
}
&.purple,.button {
.page {background:nth($cpp, 1);color: #fff;
&:hover {background:nth($cpp, 2)}
&:active {background:nth($cpp, 3)}
}
.button[disabled] {background:nth($cpp, 1);}
&.skin-2 .curr {background:nth($cpp, 3)}
}
} }