github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Delete pagination.vue

pull/165/head
tangjinzhou 7 years ago committed by GitHub
parent
9aa3347204
commit
4204445169
1 changed files with 0 additions and 465 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 465
      components/pagination/pagination.vue

465
components/pagination/pagination.vue
Unescape View File

@ -1,465 +0,0 @@
<script>
import Button from '../button/index'
import Pager from './Pager'
import Options from './Options'
import locale from './locale/zh_CN'
import KEYCODE from './KeyCode'
// 是否是正整数
function isInteger (value) {
return typeof value === 'number' &&
isFinite(value) &&
Math.floor(value) === value
}
function defaultItemRender (page, type, element) {
return element
}
export default {
name: 'Pagination',
props: {
prefixCls: {
type: String,
default: 'ant-pagination',
},
current: {
type: [Number, String],
default: 1,
},
total: {
type: [Number, String],
default: 0,
},
pageSize: {
type: [Number, String],
default: 10,
},
showSizeChanger: {
type: Boolean,
default: false,
},
pageSizeOptions: {
type: Array,
default: () => ['10', '20', '30', '40'],
},
showQuickJumper: {
type: Boolean,
default: false,
},
size: {
type: String,
default: '',
},
simple: Boolean,
showTitle: {
type: Boolean,
default: true,
},
showTotal: Function,
itemRender: {
type: Function,
default: defaultItemRender,
},
},
model: {
prop: 'current',
},
data () {
const { current } = this
return {
stateCurrent: +current,
}
},
methods: {
isValid (page) {
return isInteger(page) && page >= 1 && page !== this.stateCurrent
},
calculatePage (p) {
let pageSize = p
if (typeof pageSize === 'undefined') {
pageSize = this.pageSize
}
return Math.floor((this.total - 1) / pageSize) + 1
},
handleGoTO (event) {
if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
this.handleChange(this.stateCurrent)
}
},
prev () {
if (this.hasPrev()) {
this.handleChange(this.stateCurrent - 1)
}
},
next () {
if (this.hasNext()) {
this.handleChange(this.stateCurrent + 1)
}
},
hasPrev () {
return this.stateCurrent > 1
},
hasNext () {
return this.stateCurrent < this.calculatePage()
},
handleKeyDown (event) {
if (event.keyCode === KEYCODE.ARROW_UP || event.keyCode === KEYCODE.ARROW_DOWN) {
event.preventDefault()
}
},
handleKeyUp (event) {
const inputValue = event.target.value
const stateCurrent = this.stateCurrent
let value
if (inputValue === '') {
value = inputValue
} else if (isNaN(Number(inputValue))) {
value = stateCurrent
} else {
value = Number(inputValue)
}
event.target.value = value
if (event.keyCode === KEYCODE.ENTER) {
this.handleChange(value)
} else if (event.keyCode === KEYCODE.ARROW_UP) {
this.handleChange(value - 1)
} else if (event.keyCode === KEYCODE.ARROW_DOWN) {
this.handleChange(value + 1)
}
},
handleChange (p) {
let page = p
if (this.isValid(page)) {
const allTotal = this.calculatePage()
if (page > allTotal) {
page = allTotal
}
this.stateCurrent = page
this.$emit('input', page)
this.$emit('change', page, this.pageSize)
return page
}
return this.stateCurrent
},
runIfEnter (event, callback, ...restParams) {
if (event.key === 'Enter' || event.charCode === 13) {
callback(...restParams)
}
},
runIfEnterPrev (event) {
this.runIfEnter(event, this.prev)
},
runIfEnterNext (event) {
this.runIfEnter(event, this.next)
},
runIfEnterJumpPrev (event) {
this.runIfEnter(event, this.jumpPrev)
},
runIfEnterJumpNext (event) {
this.runIfEnter(event, this.jumpNext)
},
getJumpPrevPage () {
return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5))
},
getJumpNextPage () {
return Math.min(this.calculatePage(), this.stateCurrent + (this.showLessItems ? 3 : 5))
},
jumpPrev () {
this.handleChange(this.getJumpPrevPage())
},
jumpNext () {
this.handleChange(this.getJumpNextPage())
},
},
watch: {
current (val) {
this.stateCurrent = +val
},
},
components: {
vcButton: Button,
Pager,
},
render () {
const prefixCls = this.prefixCls
const allPages = this.calculatePage()
const pagerList = []
let jumpPrev = null
let jumpNext = null
let firstPager = null
let lastPager = null
let gotoButton = null
const goButton = this.showQuickJumper
const pageBufferSize = this.showLessItems ? 1 : 2
const { stateCurrent, pageSize } = this
const smallClass = this.size === 'small' ? 'mini' : ''
const prevPage = stateCurrent - 1 > 0 ? stateCurrent - 1 : 0
const nextPage = stateCurrent + 1 < allPages ? stateCurrent + 1 : allPages
if (this.simple) {
if (goButton) {
if (typeof goButton === 'boolean') {
gotoButton = (
<li
title={this.showTitle ? `${locale.jump_to}${stateCurrent}/${allPages}` : null}
class={`${prefixCls}-simple-pager`}
>
<vc-button
onClick={this.handleGoTO}
onKeyup={this.handleGoTO}
>
{locale.jump_to_confirm}
</vc-button>
</li>
)
} else {
gotoButton = goButton
}
}
return (
<ul class={`${prefixCls} ${prefixCls}-simple ${smallClass}`}>
<li
title={this.showTitle ? locale.prev_page : null}
onClick={this.prev}
tabIndex='0'
onKeypress={this.runIfEnterPrev}
class={`${this.hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
aria-disabled={!this.hasPrev()}
>
{this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
</li>
<li
title={this.showTitle ? `${stateCurrent}/${allPages}` : null}
class={`${prefixCls}-simple-pager`}
>
<input
type='text'
value={this.stateCurrent}
onKeydown={this.handleKeyDown}
onKeyup={this.handleKeyUp}
onChange={this.handleKeyUp}
size='3'
/>
<span class={`${prefixCls}-slash`}>／</span>
{allPages}
</li>
<li
title={this.showTitle ? locale.next_page : null}
onClick={this.next}
tabIndex='0'
onKeypress={this.runIfEnterNext}
class={`${this.hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
aria-disabled={!this.hasNext()}
>
{this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
</li>
{gotoButton}
</ul>
)
}
if (allPages <= 5 + pageBufferSize * 2) {
for (let i = 1; i <= allPages; i++) {
const active = stateCurrent === i
pagerList.push(
<Pager
rootPrefixCls={this.prefixCls}
onClick={this.handleChange}
onKeypress={this.runIfEnter}
key={i}
page={i}
active={active}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
}
} else {
const prevItemTitle = this.showLessItems ? locale.prev_3 : locale.prev_5
const nextItemTitle = this.showLessItems ? locale.next_3 : locale.next_5
jumpPrev = (
<li
title={this.showTitle ? prevItemTitle : null}
key='prev'
onClick={this.jumpPrev}
tabIndex='0'
onKeypress={this.runIfEnterJumpPrev}
class={`${prefixCls}-jump-prev`}
>
{this.itemRender(
this.getJumpPrevPage(), 'jump-prev', <a class={`${prefixCls}-item-link`} />
)}
</li>
)
jumpNext = (
<li
title={this.showTitle ? nextItemTitle : null}
key='next'
tabIndex='0'
onClick={this.jumpNext}
onKeypress={this.runIfEnterJumpNext}
class={`${prefixCls}-jump-next`}
>
{this.itemRender(
this.getJumpNextPage(), 'jump-next', <a class={`${prefixCls}-item-link`} />
)}
</li>
)
lastPager = (
<Pager
rootPrefixCls={prefixCls}
onClick={this.handleChange}
onKeypress={this.runIfEnter}
key={allPages}
page={allPages}
active={false}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
firstPager = (
<Pager
rootPrefixCls={prefixCls}
onClick={this.handleChange}
onKeypress={this.runIfEnter}
key={1}
page={1}
active={false}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
let left = Math.max(1, stateCurrent - pageBufferSize)
let right = Math.min(stateCurrent + pageBufferSize, allPages)
if (stateCurrent - 1 <= pageBufferSize) {
right = 1 + pageBufferSize * 2
}
if (allPages - stateCurrent <= pageBufferSize) {
left = allPages - pageBufferSize * 2
}
for (let i = left; i <= right; i++) {
const active = stateCurrent === i
pagerList.push(
<Pager
rootPrefixCls={prefixCls}
onClick={this.handleChange}
onKeypress={this.runIfEnter}
key={i}
page={i}
active={active}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
}
if (stateCurrent - 1 >= pageBufferSize * 2 && stateCurrent !== 1 + 2) {
pagerList[0] = (
<Pager
rootPrefixCls={prefixCls}
onClick={this.handleChange}
onKeypress={this.runIfEnter}
key={left}
page={left}
className={`${prefixCls}-item-after-jump-prev`}
active={false}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
pagerList.unshift(jumpPrev)
}
if (allPages - stateCurrent >= pageBufferSize * 2 && stateCurrent !== allPages - 2) {
pagerList[pagerList.length - 1] = (
<Pager
rootPrefixCls={prefixCls}
onClick={this.handleChange}
onKeypress={this.runIfEnter}
key={right}
page={right}
className={`${prefixCls}-item-before-jump-next`}
active={false}
showTitle={this.showTitle}
itemRender={this.itemRender}
/>
)
pagerList.push(jumpNext)
}
if (left !== 1) {
pagerList.unshift(firstPager)
}
if (right !== allPages) {
pagerList.push(lastPager)
}
}
let totalText = null
if (this.showTotal) {
totalText = (
<li class={`${prefixCls}-total-text`}>
{this.showTotal(
this.total,
[
(stateCurrent - 1) * pageSize + 1,
stateCurrent * pageSize > this.total ? this.total : stateCurrent * pageSize,
]
)}
</li>
)
}
const prevDisabled = !this.hasPrev()
const nextDisabled = !this.hasNext()
return (
<ul
class={`${prefixCls} ${smallClass}`}
unselectable='unselectable'
>
{totalText}
<li
title={this.showTitle ? locale.prev_page : null}
onClick={this.prev}
tabIndex='0'
onKeypress={this.runIfEnterPrev}
class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
aria-disabled={prevDisabled}
>
{this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
</li>
{pagerList}
<li
title={this.showTitle ? locale.next_page : null}
onClick={this.next}
tabIndex='0'
onKeypress={this.runIfEnterNext}
class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
aria-disabled={nextDisabled}
>
{this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
</li>
<Options
locale={locale}
rootPrefixCls={prefixCls}
selectComponentClass={this.selectComponentClass}
selectPrefixCls={this.selectPrefixCls}
changeSize={this.showSizeChanger ? this.changePageSize : null}
current={stateCurrent}
pageSize={pageSize}
pageSizeOptions={this.pageSizeOptions}
quickGo={this.showQuickJumper ? this.handleChange : null}
goButton={goButton}
/>
</ul>
)
},
}
</script>
Write Preview
Loading…
Cancel
Save