From 0b47e23e965446f4ce49a89cc2a6f24b3f8e7fda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Sat, 27 Jan 2018 03:47:44 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=88=86=E9=A1=B5=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/pager/index.js | 182 +++++++++++++++++++++++++---------------- src/js/pager/main.scss | 177 +++++++++++++++++++++++++-------------- 2 files changed, 228 insertions(+), 131 deletions(-) diff --git a/src/js/pager/index.js b/src/js/pager/index.js index a399182..f7e0ddf 100644 --- a/src/js/pager/index.js +++ b/src/js/pager/index.js @@ -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: ``, + end: ``, + prev: ``, + next: ``, + pager: ``, + curr: ``, + total: `共 {{totalPage}} 页 {{totalItems}} 条`, + jumper: `
前往 + 页 +
` } 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 ` -
- - - - {{props.btns.next}} - {{props.btns.end}} - -
- 共 {{totalPages}} 页 {{totalItems}} 条，前往 - - 页 -
+
+ ${layout.join('\n')}
` }, 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) diff --git a/src/js/pager/main.scss b/src/js/pager/main.scss index 1652e7f..d4f36f5 100644 --- a/src/js/pager/main.scss +++ b/src/js/pager/main.scss @@ -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)} + } }