重构分页组件
宇天
parent
b460410b68
commit
0b47e23e96
|
|
@ -4,7 +4,7 @@ import './main.scss'
|
|||
|
||||
Anot.ui.pager = '1.0.0'
|
||||
//计算页码列表
|
||||
function calculate({ currPage, maxPageShow, totalPages }) {
|
||||
function calculate({ currPage, maxPageShow, totalPage }) {
|
||||
let arr = []
|
||||
let fixNum = 0
|
||||
let halfPage =
|
||||
|
|
@ -12,87 +12,135 @@ function calculate({ currPage, maxPageShow, totalPages }) {
|
|||
? maxPageShow - currPage
|
||||
: Math.floor(maxPageShow / 2)
|
||||
|
||||
if (totalPages < 2) {
|
||||
if (totalPage < 2) {
|
||||
return arr
|
||||
}
|
||||
if (currPage - halfPage > 1) {
|
||||
arr.push('...')
|
||||
}
|
||||
if (totalPages - currPage < halfPage) {
|
||||
fixNum = halfPage - totalPages + currPage
|
||||
if (totalPage - currPage < halfPage) {
|
||||
fixNum = halfPage - totalPage + currPage
|
||||
}
|
||||
for (
|
||||
let i = currPage - halfPage - fixNum;
|
||||
i < currPage + halfPage + 1 && i <= totalPages;
|
||||
i < currPage + halfPage + 1 && i <= totalPage;
|
||||
i++
|
||||
) {
|
||||
if (i > 0) {
|
||||
arr.push(i)
|
||||
}
|
||||
}
|
||||
if (currPage + halfPage < totalPages) {
|
||||
if (currPage + halfPage < totalPage) {
|
||||
arr.push('...')
|
||||
}
|
||||
return arr
|
||||
}
|
||||
// 更新组件
|
||||
function update(currPage, vm) {
|
||||
const { totalPages, props: { maxPageShow } } = vm
|
||||
const { totalPage, props: { maxPageShow } } = vm
|
||||
vm.currPage = vm.inputPage = currPage
|
||||
vm.props.onPageChange(currPage)
|
||||
vm.pageList.clear()
|
||||
if (totalPages > 1) {
|
||||
vm.pageList.pushArray(calculate({ currPage, totalPages, maxPageShow }))
|
||||
if (typeof vm.props.onPageChange === 'function') {
|
||||
vm.props.onPageChange(currPage)
|
||||
}
|
||||
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', {
|
||||
construct: function(props, state) {
|
||||
props.className =
|
||||
'skin-' + (props.theme || 1) + ' ' + (props.color || 'plain')
|
||||
delete props.theme
|
||||
props.theme = +props.theme || 1
|
||||
if (props.simpleMode) {
|
||||
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.size
|
||||
},
|
||||
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 `
|
||||
<div class="do-pager do-fn-noselect" :class="{{props.className}}">
|
||||
<a class="normal"
|
||||
:if="currPage > 1 && !props.simpleMode"
|
||||
:attr="{href: parseUrl(1)}"
|
||||
: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
|
||||
class="do-pager do-fn-noselect"
|
||||
:class="{{classList.join(' ')}}">
|
||||
${layout.join('\n')}
|
||||
</div>`
|
||||
},
|
||||
componentWillMount: function() {
|
||||
const { currPage, totalPages, props } = this
|
||||
const { currPage, totalPage, props } = this
|
||||
this.pageList.clear()
|
||||
this.pageList.pushArray(
|
||||
calculate({ currPage, totalPages, maxPageShow: props.maxPageShow })
|
||||
calculate({ currPage, totalPage, maxPageShow: props.maxPageShow })
|
||||
)
|
||||
},
|
||||
componentDidMount: function() {
|
||||
|
|
@ -101,6 +149,7 @@ export default Anot.component('pager', {
|
|||
}
|
||||
},
|
||||
state: {
|
||||
classList: [],
|
||||
currPage: 1,
|
||||
totalItems: 1,
|
||||
pageSize: 20,
|
||||
|
|
@ -108,63 +157,56 @@ export default Anot.component('pager', {
|
|||
pageList: []
|
||||
},
|
||||
computed: {
|
||||
totalPages: function() {
|
||||
totalPage: function() {
|
||||
return Math.ceil(this.totalItems / this.pageSize)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
url: null,
|
||||
btns: {
|
||||
prev: '<<',
|
||||
next: '>>',
|
||||
home: '首页',
|
||||
end: '末页'
|
||||
},
|
||||
maxPageShow: 5,
|
||||
className: '',
|
||||
simpleMode: !1,
|
||||
onPageChange: Anot.noop,
|
||||
onCreated: Anot.noop
|
||||
radius: 3,
|
||||
onPageChange: Anot.PropsTypes.isFunction(),
|
||||
onCreated: Anot.PropsTypes.isFunction()
|
||||
},
|
||||
skip: ['classList'],
|
||||
methods: {
|
||||
// 格式化页码的URL
|
||||
parseUrl: function(val) {
|
||||
val = val >>> 0
|
||||
if (val < 1 || !this.props.url || this.currPage === val) {
|
||||
return 'javascript:;'
|
||||
return ''
|
||||
}
|
||||
return this.props.url.replace('{id}', val)
|
||||
},
|
||||
// 设置页码
|
||||
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
|
||||
}
|
||||
let elem = (ev && ev.target) || null
|
||||
if (val && elem) {
|
||||
if (elem) {
|
||||
if (val && val !== '...') {
|
||||
let link =
|
||||
(elem && elem.getAttribute('href')) ||
|
||||
elem.getAttribute('xlink:href')
|
||||
let link = elem.dataset.to
|
||||
|
||||
if ('javascript:;' !== link) {
|
||||
if (link) {
|
||||
location.href = link
|
||||
} else {
|
||||
val = val >> 0
|
||||
update(val, this)
|
||||
val = val >>> 0
|
||||
}
|
||||
update(val, this)
|
||||
}
|
||||
} else {
|
||||
if (val === null) {
|
||||
let { inputPage, totalPages, currPage } = this
|
||||
inputPage = inputPage >>> 0
|
||||
|
||||
if (ev && ev.keyCode === 13) {
|
||||
if (inputPage < 1 || currPage === inputPage) {
|
||||
return (this.inputPage = currPage)
|
||||
}
|
||||
if (inputPage > totalPages) {
|
||||
inputPage = totalPages
|
||||
if (inputPage > totalPage) {
|
||||
inputPage = totalPage
|
||||
}
|
||||
this.inputPage = inputPage
|
||||
update(inputPage, this)
|
||||
|
|
|
|||
|
|
@ -8,87 +8,142 @@
|
|||
|
||||
@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);
|
||||
|
||||
&.mini {line-height:35px;
|
||||
.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}
|
||||
}
|
||||
|
||||
a {display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color: nth($cgr, 1);text-decoration:none;cursor:pointer;}
|
||||
a.curr, a.disabled {cursor:default;}
|
||||
.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%;
|
||||
|
||||
a.normal,
|
||||
a.disabled,
|
||||
a.curr {padding:0 10px;margin:0 3px;}
|
||||
.page,
|
||||
.button,
|
||||
.disabled,
|
||||
.curr {padding:0 8px;margin:0 3px;}
|
||||
|
||||
a.curr {font-weight:bold;font-size:15px;}
|
||||
a.disabled {min-width:0;padding:0;background:none;color:nth($cgr, 1);
|
||||
.curr {font-weight:bold;font-size:15px;}
|
||||
.page.disabled {min-width:0;padding:0;background:none;color:nth($cgr, 1);
|
||||
&:hover,&:active {background:none;}
|
||||
}
|
||||
.page.curr {background:none;color:nth($cgr, 1);
|
||||
&:hover,&:active {background:none;}
|
||||
}
|
||||
.button[disabled] {cursor:not-allowed;}
|
||||
|
||||
.input-box,
|
||||
.input-box span,
|
||||
.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;}
|
||||
.total-box,.input-box {display:inline-block;padding:0 8px;}
|
||||
.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;}
|
||||
}
|
||||
|
||||
&.skin-2 {float:right;width:auto;
|
||||
|
||||
a.normal,
|
||||
a.disabled,
|
||||
a.curr {float:left;margin:0;padding:0 5px;color:#fff;}
|
||||
.page,
|
||||
.button,
|
||||
.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;}
|
||||
}
|
||||
|
||||
&.plain a.normal {background:nth($cp, 1);color:nth($cgr, 1);}
|
||||
&.plain a.normal:hover {background:nth($cp, 2)}
|
||||
&.skin-2.plain a.curr,
|
||||
&.plain a.normal:active {background:nth($cp, 3)}
|
||||
&.plain {
|
||||
.page,.button {background:nth($cp, 1);color:nth($cgr, 1);
|
||||
|
||||
&.grey a.normal {background:nth($cgr, 1);color: #fff;}
|
||||
&.grey a.normal:hover {background:nth($cgr, 2)}
|
||||
&.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;}
|
||||
&:hover {background:nth($cp, 2)}
|
||||
&:active {background:nth($cp, 3)}
|
||||
}
|
||||
.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)}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in New Issue