add vc-pagination
wangxueliang
parent
226636c757
commit
195022e4c9
|
|
@ -1,66 +1,39 @@
|
||||||
<script>
|
<script>
|
||||||
import Button from '../button/index'
|
import PropTypes from '../_util/vue-types'
|
||||||
import Pager from './Pager'
|
import VcSelect from '../select'
|
||||||
import Options from './Options'
|
import enUS from '../vc-pagination/locale/en_US'
|
||||||
import locale from './locale/zh_CN'
|
import LocaleReceiver from '../locale-provider/LocaleReceiver'
|
||||||
import KEYCODE from './KeyCode'
|
import { getOptionProps } from '../_util/props-util'
|
||||||
|
import VcPagination from '../vc-pagination'
|
||||||
|
|
||||||
// 是否是正整数
|
export const PaginationProps = {
|
||||||
function isInteger (value) {
|
total: PropTypes.number,
|
||||||
return typeof value === 'number' &&
|
defaultCurrent: PropTypes.number,
|
||||||
isFinite(value) &&
|
current: PropTypes.number,
|
||||||
Math.floor(value) === value
|
defaultPageSize: PropTypes.number,
|
||||||
}
|
pageSize: PropTypes.number,
|
||||||
|
hideOnSinglePage: PropTypes.bool,
|
||||||
function defaultItemRender (page, type, element) {
|
showSizeChanger: PropTypes.bool,
|
||||||
return element
|
pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([
|
||||||
|
PropTypes.number,
|
||||||
|
PropTypes.string,
|
||||||
|
])),
|
||||||
|
showSizeChange: PropTypes.func,
|
||||||
|
showQuickJumper: PropTypes.bool,
|
||||||
|
showTotal: PropTypes.any,
|
||||||
|
size: PropTypes.string,
|
||||||
|
simple: PropTypes.bool,
|
||||||
|
locale: PropTypes.object,
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
selectPrefixCls: PropTypes.string,
|
||||||
|
itemRender: PropTypes.any,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Pagination',
|
|
||||||
props: {
|
props: {
|
||||||
prefixCls: {
|
...PaginationProps,
|
||||||
type: String,
|
prefixCls: PropTypes.string.def('ant-pagination'),
|
||||||
default: 'ant-pagination',
|
selectPrefixCls: PropTypes.string.def('ant-select'),
|
||||||
},
|
|
||||||
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: {
|
model: {
|
||||||
prop: 'current',
|
prop: 'current',
|
||||||
|
|
@ -72,393 +45,35 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
isValid (page) {
|
renderPagination (locale) {
|
||||||
return isInteger(page) && page >= 1 && page !== this.stateCurrent
|
const { size, ...restProps } = getOptionProps(this)
|
||||||
},
|
const isSmall = size === 'small'
|
||||||
calculatePage (p) {
|
const paginationProps = {
|
||||||
let pageSize = p
|
props: {
|
||||||
if (typeof pageSize === 'undefined') {
|
...restProps,
|
||||||
pageSize = this.pageSize
|
selectComponentClass: VcSelect,
|
||||||
|
locale,
|
||||||
|
},
|
||||||
|
class: {
|
||||||
|
'mini': isSmall,
|
||||||
|
},
|
||||||
|
on: this.$listeners,
|
||||||
}
|
}
|
||||||
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 === '') {
|
return (
|
||||||
value = inputValue
|
<VcPagination
|
||||||
} else if (isNaN(Number(inputValue))) {
|
{...paginationProps}
|
||||||
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 () {
|
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 (
|
return (
|
||||||
<ul
|
<LocaleReceiver
|
||||||
class={`${prefixCls} ${smallClass}`}
|
componentName='Pagination'
|
||||||
unselectable='unselectable'
|
defaultLocale={enUS}
|
||||||
>
|
children={this.renderPagination}
|
||||||
{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>
|
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
基本
|
基本
|
||||||
<Pagination current=1 total=50 />
|
<Pagination :current="1" :total="50" />
|
||||||
</br>
|
<br>
|
||||||
更多
|
更多
|
||||||
<Pagination :current="6" total=500 />
|
<Pagination :current="6" :total="500" />
|
||||||
</br>
|
<br>
|
||||||
简洁
|
简洁
|
||||||
<div style="margin-bottom:10px">
|
<div style="margin-bottom:10px">
|
||||||
<pagination :simple="simple" :current="5" :total="total"></pagination>
|
<pagination :simple="simple" :current="5" :total="total"></pagination>
|
||||||
</div>
|
</div>
|
||||||
</br>
|
<br>
|
||||||
改值操作
|
改值操作
|
||||||
<div style="margin-bottom:10px">
|
<div style="margin-bottom:10px">
|
||||||
<pagination :current="current" :total="total" @change="onchange"></pagination>
|
<pagination :current="current" :total="total" @change="onchange"></pagination>
|
||||||
<vc-button @click="changeValue">改值</vc-button>
|
<vc-button @click="changeValue">改值</vc-button>
|
||||||
</div>
|
</div>
|
||||||
</br>
|
<br>
|
||||||
双向绑定
|
双向绑定
|
||||||
<div>
|
<div>
|
||||||
<pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
|
<pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
|
||||||
<vc-button @click="getValue">当前值</vc-button>
|
<vc-button @click="getValue">当前值</vc-button>
|
||||||
</div>
|
</div>
|
||||||
</br>
|
<br>
|
||||||
迷你
|
迷你
|
||||||
<Pagination :current="1" total=50 size="small"/>
|
<Pagination :current="1" :total="50" size="small"/>
|
||||||
<Pagination :current="1" total=50 :showTotal="showTotal" size="small"/>
|
<Pagination :current="1" :total="50" :showTotal="showTotal" size="small"/>
|
||||||
</br>
|
<br>
|
||||||
总数
|
总数
|
||||||
<Pagination :current="1" total=50 :showTotal="showTotal"/>
|
<Pagination :current="1" :total="50" :showTotal="showTotal"/>
|
||||||
<Pagination :current="1" total=50 :showTotal="showTotal1"/>
|
<Pagination :current="1" :total="50" :showTotal="showTotal1"/>
|
||||||
</br>
|
<br>
|
||||||
跳转
|
跳转
|
||||||
<Pagination v-model="current" total=50 :showQuickJumper="showQuickJumper"/>
|
<Pagination v-model="current" :total="50" :showQuickJumper="showQuickJumper"/>
|
||||||
<vc-button @click="getValue">当前值</vc-button>
|
<vc-button @click="getValue">当前值</vc-button>
|
||||||
</br>
|
<br>
|
||||||
上一步下一步
|
上一步下一步
|
||||||
<Pagination total=500 :itemRender="itemRender" />
|
<Pagination :total="500" :itemRender="itemRender" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
import Pagination from './Pagination'
|
import Pagination from './Pagination'
|
||||||
|
|
||||||
|
export { PaginationProps } from './Pagination'
|
||||||
export default Pagination
|
export default Pagination
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
border: @border-width-base @border-style-base @border-color-base;
|
border: @border-width-base @border-style-base @border-color-base;
|
||||||
background-color: @component-background;
|
background-color: @component-background;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
font-family: Arial;
|
font-family: @pagination-font-family;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -134,7 +134,7 @@
|
||||||
&-next,
|
&-next,
|
||||||
&-jump-prev,
|
&-jump-prev,
|
||||||
&-jump-next {
|
&-jump-next {
|
||||||
font-family: Arial;
|
font-family: @pagination-font-family;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
| Property | Description | Type | Default |
|
| Property | Description | Type | Default |
|
||||||
| -------- | ----------- | ---- | ------- |
|
| -------- | ----------- | ---- | ------- |
|
||||||
| autoFocus | get focus when component mounted | boolean | false |
|
| autoFocus | get focus when component mounted | boolean | false |
|
||||||
| checked | determine whether the `Switch` is checked | boolean | false |
|
| checked(v-model) | determine whether the `Switch` is checked | boolean | false |
|
||||||
| checkedChildren | content to be shown when the state is checked | string\|slot | |
|
| checkedChildren | content to be shown when the state is checked | string\|slot | |
|
||||||
| defaultChecked | to set the initial state | boolean | false |
|
| defaultChecked | to set the initial state | boolean | false |
|
||||||
| disabled | Disable switch | boolean | false |
|
| disabled | Disable switch | boolean | false |
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| autoFocus | 组件自动获取焦点 | boolean | false |
|
| autoFocus | 组件自动获取焦点 | boolean | false |
|
||||||
| checked | 指定当前是否选中 | boolean | false |
|
| checked(v-model) | 指定当前是否选中 | boolean | false |
|
||||||
| checkedChildren | 选中时的内容 | string\|slot | |
|
| checkedChildren | 选中时的内容 | string\|slot | |
|
||||||
| defaultChecked | 初始是否选中 | boolean | false |
|
| defaultChecked | 初始是否选中 | boolean | false |
|
||||||
| disabled | 是否禁用 | boolean | false |
|
| disabled | 是否禁用 | boolean | false |
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,21 @@
|
||||||
<script>
|
<script>
|
||||||
import PropTypes from 'vue-types'
|
import PropTypes from '../_util/vue-types'
|
||||||
import KEYCODE from './KeyCode'
|
import KEYCODE from './KeyCode'
|
||||||
|
import BaseMixin from '../_util/BaseMixin'
|
||||||
|
|
||||||
function noop () {
|
|
||||||
}
|
|
||||||
export default {
|
export default {
|
||||||
|
mixins: [BaseMixin],
|
||||||
props: {
|
props: {
|
||||||
rootPrefixCls: PropTypes.String,
|
rootPrefixCls: PropTypes.String,
|
||||||
changeSize: PropTypes.func.def(noop),
|
changeSize: PropTypes.func,
|
||||||
quickGo: PropTypes.func.def(noop),
|
quickGo: PropTypes.func,
|
||||||
selectComponentClass: PropTypes.func.def(noop),
|
selectComponentClass: PropTypes.any,
|
||||||
current: PropTypes.number,
|
current: PropTypes.number,
|
||||||
pageSizeOptions: PropTypes.array.def(['10', '20', '30', '40']),
|
pageSizeOptions: PropTypes.array.def(['10', '20', '30', '40']),
|
||||||
pageSize: PropTypes.number,
|
pageSize: PropTypes.number,
|
||||||
|
buildOptionText: PropTypes.func,
|
||||||
locale: PropTypes.object,
|
locale: PropTypes.object,
|
||||||
|
goButton: PropTypes.any,
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -22,11 +24,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
buildOptionText (value) {
|
defaultBuildOptionText (value) {
|
||||||
return `${value} ${this.locale.items_per_page}`
|
return `${value} ${this.locale.items_per_page}`
|
||||||
},
|
},
|
||||||
changeValue (e) {
|
handleChange (e) {
|
||||||
this.goInputText = e.target.value
|
this.setState({
|
||||||
|
goInputText: e.target.value,
|
||||||
|
})
|
||||||
},
|
},
|
||||||
go (e) {
|
go (e) {
|
||||||
let val = this.goInputText
|
let val = this.goInputText
|
||||||
|
|
@ -38,19 +42,16 @@ export default {
|
||||||
val = this.stateCurrent
|
val = this.stateCurrent
|
||||||
}
|
}
|
||||||
if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
|
if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
|
||||||
this.goInputText = ''
|
this.setState({
|
||||||
this.stateCurrent = this.quickGo(val)
|
goInputText: '',
|
||||||
|
stateCurrent: this.quickGo(val),
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
render () {
|
render () {
|
||||||
const locale = this.locale
|
const { rootPrefixCls, locale, changeSize, quickGo, goButton, buildOptionText, selectComponentClass: Select, defaultBuildOptionText } = this
|
||||||
const prefixCls = `${this.rootPrefixCls}-options`
|
const prefixCls = `${rootPrefixCls}-options`
|
||||||
const changeSize = this.changeSize
|
|
||||||
const quickGo = this.quickGo
|
|
||||||
const goButton = this.goButton
|
|
||||||
const buildOptionText = this.buildOptionText
|
|
||||||
const Select = this.selectComponentClass
|
|
||||||
let changeSelect = null
|
let changeSelect = null
|
||||||
let goInput = null
|
let goInput = null
|
||||||
let gotoButton = null
|
let gotoButton = null
|
||||||
|
|
@ -63,7 +64,7 @@ export default {
|
||||||
const Option = Select.Option
|
const Option = Select.Option
|
||||||
const pageSize = this.pageSize || this.pageSizeOptions[0]
|
const pageSize = this.pageSize || this.pageSizeOptions[0]
|
||||||
const options = this.pageSizeOptions.map((opt, i) => (
|
const options = this.pageSizeOptions.map((opt, i) => (
|
||||||
<Option key={i} value={opt}>{buildOptionText(opt)}</Option>
|
<Option key={i} value={opt}>{buildOptionText ? buildOptionText(opt) : defaultBuildOptionText(opt)}</Option>
|
||||||
))
|
))
|
||||||
|
|
||||||
changeSelect = (
|
changeSelect = (
|
||||||
|
|
@ -74,7 +75,7 @@ export default {
|
||||||
optionLabelProp='children'
|
optionLabelProp='children'
|
||||||
dropdownMatchSelectWidth={false}
|
dropdownMatchSelectWidth={false}
|
||||||
value={pageSize.toString()}
|
value={pageSize.toString()}
|
||||||
onChange={this.changeSize}
|
onChange={value => this.changeSize(Number(value))}
|
||||||
getPopupContainer={triggerNode => triggerNode.parentNode}
|
getPopupContainer={triggerNode => triggerNode.parentNode}
|
||||||
>
|
>
|
||||||
{options}
|
{options}
|
||||||
|
|
@ -95,7 +96,12 @@ export default {
|
||||||
</button>
|
</button>
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
gotoButton = goButton
|
gotoButton = (
|
||||||
|
<span
|
||||||
|
onClick={this.go}
|
||||||
|
onKeyUp={this.go}
|
||||||
|
>{goButton}</span>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
goInput = (
|
goInput = (
|
||||||
|
|
@ -104,7 +110,7 @@ export default {
|
||||||
<input
|
<input
|
||||||
type='text'
|
type='text'
|
||||||
value={this.goInputText}
|
value={this.goInputText}
|
||||||
onInput={this.changeValue}
|
onChange={this.handleChange}
|
||||||
onKeyup={this.go}
|
onKeyup={this.go}
|
||||||
/>
|
/>
|
||||||
{locale.page}
|
{locale.page}
|
||||||
|
|
@ -1,11 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
|
import PropTypes from '../_util/vue-types'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Page',
|
name: 'Page',
|
||||||
props: {
|
props: {
|
||||||
rootPrefixCls: String,
|
rootPrefixCls: PropTypes.string,
|
||||||
page: Number,
|
page: PropTypes.number,
|
||||||
active: Boolean,
|
active: PropTypes.bool,
|
||||||
showTitle: Boolean,
|
last: PropTypes.bool,
|
||||||
|
locale: PropTypes.object,
|
||||||
|
showTitle: PropTypes.bool,
|
||||||
itemRender: {
|
itemRender: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: () => {},
|
default: () => {},
|
||||||
|
|
@ -33,12 +37,22 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
render () {
|
render () {
|
||||||
|
const { rootPrefixCls, page, active } = this
|
||||||
|
const prefixCls = `${rootPrefixCls}-item`
|
||||||
|
let cls = `${prefixCls} ${prefixCls}-${page}`
|
||||||
|
|
||||||
|
if (active) {
|
||||||
|
cls = `${cls} ${prefixCls}-active`
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
class={this.classes}
|
class={cls}
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
onKeypress={this.handleKeyPress}
|
onKeypress={this.handleKeyPress}
|
||||||
title={this.showTitle ? this.page : null}>
|
title={this.showTitle ? this.page : null}
|
||||||
|
tabIndex='0'
|
||||||
|
>
|
||||||
{this.itemRender(this.page, 'page', <a>{this.page}</a>)}
|
{this.itemRender(this.page, 'page', <a>{this.page}</a>)}
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
|
|
@ -0,0 +1,527 @@
|
||||||
|
<script>
|
||||||
|
import PropTypes from '../_util/vue-types'
|
||||||
|
import BaseMixin from '../_util/BaseMixin'
|
||||||
|
import { hasProp } from '../_util/props-util'
|
||||||
|
import Pager from './Pager'
|
||||||
|
import Options from './Options'
|
||||||
|
import LOCALE from './locale/zh_CN'
|
||||||
|
import KEYCODE from './KeyCode'
|
||||||
|
|
||||||
|
function noop () {
|
||||||
|
}
|
||||||
|
|
||||||
|
// 是否是正整数
|
||||||
|
function isInteger (value) {
|
||||||
|
return typeof value === 'number' &&
|
||||||
|
isFinite(value) &&
|
||||||
|
Math.floor(value) === value
|
||||||
|
}
|
||||||
|
|
||||||
|
function defaultItemRender (page, type, element) {
|
||||||
|
return element
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Pagination',
|
||||||
|
mixins: [BaseMixin],
|
||||||
|
props: {
|
||||||
|
prefixCls: PropTypes.string.def('rc-pagination'),
|
||||||
|
selectPrefixCls: PropTypes.string.def('rc-select'),
|
||||||
|
current: PropTypes.number,
|
||||||
|
defaultCurrent: PropTypes.number.def(1),
|
||||||
|
total: PropTypes.number.def(0),
|
||||||
|
pageSize: PropTypes.number,
|
||||||
|
defaultPageSize: PropTypes.number.def(10),
|
||||||
|
change: PropTypes.func.def(noop),
|
||||||
|
hideOnSinglePage: PropTypes.bool.def(false),
|
||||||
|
showSizeChanger: PropTypes.bool.def(false),
|
||||||
|
showLessItems: PropTypes.bool.def(false),
|
||||||
|
// showSizeChange: PropTypes.func.def(noop),
|
||||||
|
selectComponentClass: PropTypes.any,
|
||||||
|
showQuickJumper: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).def(false),
|
||||||
|
showTitle: PropTypes.bool.def(true),
|
||||||
|
pageSizeOptions: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
showTotal: PropTypes.func,
|
||||||
|
simple: PropTypes.bool,
|
||||||
|
locale: PropTypes.object.def(LOCALE),
|
||||||
|
itemRender: PropTypes.func.def(defaultItemRender),
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'current',
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
const hasOnChange = this.onChange !== noop
|
||||||
|
const hasCurrent = hasProp(this, 'current')
|
||||||
|
if (hasCurrent && !hasOnChange) {
|
||||||
|
console.warn('Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.'); // eslint-disable-line
|
||||||
|
}
|
||||||
|
let current = this.defaultCurrent
|
||||||
|
if (hasCurrent) {
|
||||||
|
current = this.current
|
||||||
|
}
|
||||||
|
|
||||||
|
let pageSize = this.defaultPageSize
|
||||||
|
if (hasProp(this, 'pageSize')) {
|
||||||
|
pageSize = this.pageSize
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
stateCurrent: current,
|
||||||
|
stateCurrentInputValue: current,
|
||||||
|
statePageSize: pageSize,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
current (val) {
|
||||||
|
this.setState({
|
||||||
|
stateCurrent: val,
|
||||||
|
stateCurrentInputValue: val,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
pageSize (val) {
|
||||||
|
const newState = {}
|
||||||
|
let current = this.current
|
||||||
|
const newCurrent = this.calculatePage(val)
|
||||||
|
current = current > newCurrent ? newCurrent : current
|
||||||
|
if (hasProp(this, 'current')) {
|
||||||
|
newState.stateCurrent = current
|
||||||
|
newState.stateCurrentInputValue = current
|
||||||
|
}
|
||||||
|
newState.statePageSize = val
|
||||||
|
this.setState(newState)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isValid (page) {
|
||||||
|
return isInteger(page) && page >= 1 && page !== this.stateCurrent
|
||||||
|
},
|
||||||
|
calculatePage (p) {
|
||||||
|
let pageSize = p
|
||||||
|
if (typeof pageSize === 'undefined') {
|
||||||
|
pageSize = this.statePageSize
|
||||||
|
}
|
||||||
|
return Math.floor((this.total - 1) / pageSize) + 1
|
||||||
|
},
|
||||||
|
handleGoTO (event) {
|
||||||
|
if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
|
||||||
|
this.handleChange(this.stateCurrentInputValue)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 stateCurrentInputValue = this.stateCurrentInputValue
|
||||||
|
let value
|
||||||
|
|
||||||
|
if (inputValue === '') {
|
||||||
|
value = inputValue
|
||||||
|
} else if (isNaN(Number(inputValue))) {
|
||||||
|
value = stateCurrentInputValue
|
||||||
|
} else {
|
||||||
|
value = Number(inputValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value !== stateCurrentInputValue) {
|
||||||
|
this.setState({
|
||||||
|
stateCurrentInputValue: 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)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changePageSize (size) {
|
||||||
|
let current = this.stateCurrent
|
||||||
|
const newCurrent = this.calculatePage(size)
|
||||||
|
current = current > newCurrent ? newCurrent : current
|
||||||
|
if (typeof size === 'number') {
|
||||||
|
if (!hasProp(this, 'pageSize')) {
|
||||||
|
this.setState({
|
||||||
|
statePageSize: size,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (!hasProp(this, 'current')) {
|
||||||
|
this.setState({
|
||||||
|
stateCurrent: current,
|
||||||
|
stateCurrentInputValue: current,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$emit('showSizeChange', current, size)
|
||||||
|
},
|
||||||
|
handleChange (p) {
|
||||||
|
let page = p
|
||||||
|
if (this.isValid(page)) {
|
||||||
|
const allTotal = this.calculatePage()
|
||||||
|
if (page > allTotal) {
|
||||||
|
page = allTotal
|
||||||
|
}
|
||||||
|
if (!hasProp(this, 'current')) {
|
||||||
|
this.setState({
|
||||||
|
stateCurrent: page,
|
||||||
|
stateCurrentInputValue: page,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.$emit('input', page)
|
||||||
|
this.$emit('change', page, this.statePageSize)
|
||||||
|
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())
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
// When hideOnSinglePage is true and there is only 1 page, hide the pager
|
||||||
|
if (this.hideOnSinglePage === true && this.total <= this.statePageSize) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const locale = this.locale
|
||||||
|
|
||||||
|
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 && this.showQuickJumper.goButton)
|
||||||
|
const pageBufferSize = this.showLessItems ? 1 : 2
|
||||||
|
const { stateCurrent, statePageSize } = this
|
||||||
|
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 = (
|
||||||
|
<button
|
||||||
|
type='button'
|
||||||
|
onClick={this.handleGoTO}
|
||||||
|
onKeyUp={this.handleGoTO}
|
||||||
|
>
|
||||||
|
{locale.jump_to_confirm}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
gotoButton = (
|
||||||
|
<span
|
||||||
|
onClick={this.handleGoTO}
|
||||||
|
onKeyUp={this.handleGoTO}
|
||||||
|
>{goButton}</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
gotoButton = (
|
||||||
|
<li
|
||||||
|
title={this.showTitle ? `${locale.jump_to}${this.stateCurrent}/${allPages}` : null}
|
||||||
|
class={`${prefixCls}-simple-pager`}
|
||||||
|
>
|
||||||
|
{gotoButton}
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<ul class={`${prefixCls} ${prefixCls}-simple`}>
|
||||||
|
<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.stateCurrentInputValue}
|
||||||
|
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
|
||||||
|
locale={locale}
|
||||||
|
rootPrefixCls={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
|
||||||
|
locale={locale}
|
||||||
|
last
|
||||||
|
rootPrefixCls={prefixCls}
|
||||||
|
onClick={this.handleChange}
|
||||||
|
onKeypress={this.runIfEnter}
|
||||||
|
key={allPages}
|
||||||
|
page={allPages}
|
||||||
|
active={false}
|
||||||
|
showTitle={this.showTitle}
|
||||||
|
itemRender={this.itemRender}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
firstPager = (
|
||||||
|
<Pager
|
||||||
|
locale={locale}
|
||||||
|
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
|
||||||
|
locale={locale}
|
||||||
|
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
|
||||||
|
locale={locale}
|
||||||
|
rootPrefixCls={prefixCls}
|
||||||
|
onClick={this.handleChange}
|
||||||
|
onKeypress={this.runIfEnter}
|
||||||
|
key={left}
|
||||||
|
page={left}
|
||||||
|
class={`${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
|
||||||
|
locale={locale}
|
||||||
|
rootPrefixCls={prefixCls}
|
||||||
|
onClick={this.handleChange}
|
||||||
|
onKeypress={this.runIfEnter}
|
||||||
|
key={right}
|
||||||
|
page={right}
|
||||||
|
class={`${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) * statePageSize + 1,
|
||||||
|
stateCurrent * statePageSize > this.total ? this.total : stateCurrent * statePageSize,
|
||||||
|
]
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const prevDisabled = !this.hasPrev()
|
||||||
|
const nextDisabled = !this.hasNext()
|
||||||
|
return (
|
||||||
|
<ul
|
||||||
|
class={`${prefixCls}`}
|
||||||
|
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={statePageSize}
|
||||||
|
pageSizeOptions={this.pageSizeOptions}
|
||||||
|
quickGo={this.showQuickJumper ? this.handleChange : null}
|
||||||
|
goButton={goButton}
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,288 @@
|
||||||
|
@prefixClass: rc-pagination;
|
||||||
|
|
||||||
|
.@{prefixClass} {
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: 'Arial';
|
||||||
|
user-select: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-total-text {
|
||||||
|
float: left;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 8px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
clear: both;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 6px;
|
||||||
|
min-width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none;
|
||||||
|
float: left;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #2db7f5;
|
||||||
|
a {
|
||||||
|
color: #2db7f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
background-color: #2db7f5;
|
||||||
|
border-color: #2db7f5;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-jump-prev, &-jump-next {
|
||||||
|
&:after {
|
||||||
|
content: "•••";
|
||||||
|
display: block;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
color: #2db7f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-jump-prev {
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
content: "«";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-jump-next {
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
content: "»";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-prev, &-jump-prev, &-jump-next {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
&-prev, &-next, &-jump-prev, &-jump-next {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #666;
|
||||||
|
font-size: 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
list-style: none;
|
||||||
|
min-width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-prev {
|
||||||
|
a {
|
||||||
|
&:after {
|
||||||
|
content: "‹";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-next {
|
||||||
|
a {
|
||||||
|
&:after {
|
||||||
|
content: "›";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-prev, &-next {
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
font-size: 18px;
|
||||||
|
a {
|
||||||
|
color: #666;
|
||||||
|
&:after {
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
a {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-options {
|
||||||
|
float: left;
|
||||||
|
margin-left: 15px;
|
||||||
|
&-size-changer {
|
||||||
|
float: left;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-quick-jumper {
|
||||||
|
float: left;
|
||||||
|
margin-left: 16px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 0 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
outline: none;
|
||||||
|
padding: 3px 12px;
|
||||||
|
width: 50px;
|
||||||
|
height: 28px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #2db7f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
height: 28px;
|
||||||
|
user-select: none;
|
||||||
|
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||||
|
position: relative;
|
||||||
|
color: rgba(0, 0, 0, .65);
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
|
||||||
|
&:hover, &:active, &:focus {
|
||||||
|
color: #2db7f5;
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: #2db7f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-simple {
|
||||||
|
.@{prefixClass}-prev, .@{prefixClass}-next {
|
||||||
|
border: none;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{prefixClass}-simple-pager {
|
||||||
|
float: left;
|
||||||
|
margin-right: 8px;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
.@{prefixClass}-slash {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 0 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
outline: none;
|
||||||
|
padding: 5px 8px;
|
||||||
|
min-height: 20px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #2db7f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
height: 26px;
|
||||||
|
user-select: none;
|
||||||
|
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||||
|
position: relative;
|
||||||
|
color: rgba(0, 0, 0, .65);
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
|
||||||
|
&:hover, &:active, &:focus {
|
||||||
|
color: #2db7f5;
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: #2db7f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.@{prefixClass}-item {
|
||||||
|
&-after-jump-prev,
|
||||||
|
&-before-jump-next {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
current: 3,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange (page) {
|
||||||
|
console.log(page)
|
||||||
|
this.current = page
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<VcPagination
|
||||||
|
onChange={this.onChange}
|
||||||
|
current={this.current}
|
||||||
|
total={25}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
itemRender (current, type, element) {
|
||||||
|
if (type === 'page') {
|
||||||
|
return <a href={`#${current}`}>{current}</a>
|
||||||
|
}
|
||||||
|
return element
|
||||||
|
},
|
||||||
|
textItemRender (current, type, element) {
|
||||||
|
if (type === 'prev') {
|
||||||
|
return 'Prev'
|
||||||
|
}
|
||||||
|
if (type === 'next') {
|
||||||
|
return 'Next'
|
||||||
|
}
|
||||||
|
return element
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<VcPagination
|
||||||
|
total={100}
|
||||||
|
itemRender={this.itemRender}
|
||||||
|
/>
|
||||||
|
<VcPagination
|
||||||
|
total={100}
|
||||||
|
itemRender={this.textItemRender}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import VcSelect from '../../vc-select'
|
||||||
|
import '../assets/index.less'
|
||||||
|
import '../../vc-select/assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onShowSizeChange (current, pageSize) {
|
||||||
|
console.log(current)
|
||||||
|
console.log(pageSize)
|
||||||
|
},
|
||||||
|
onChange (current, pageSize) {
|
||||||
|
console.log('onChange:current=', current)
|
||||||
|
console.log('onChange:pageSize=', pageSize)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<VcPagination
|
||||||
|
selectComponentClass={VcSelect}
|
||||||
|
showQuickJumper
|
||||||
|
showSizeChanger
|
||||||
|
defaultPageSize={20}
|
||||||
|
defaultCurrent={5}
|
||||||
|
onShowSizeChange={this.onShowSizeChange}
|
||||||
|
onChange={this.onChange}
|
||||||
|
total={450}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import VcSelect from '../../vc-select'
|
||||||
|
import '../assets/index.less'
|
||||||
|
import '../../vc-select/assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onShowSizeChange (current, pageSize) {
|
||||||
|
console.log(current)
|
||||||
|
console.log(pageSize)
|
||||||
|
},
|
||||||
|
onChange (current, pageSize) {
|
||||||
|
console.log('onChange:current=', current)
|
||||||
|
console.log('onChange:pageSize=', pageSize)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p> customize node </p>
|
||||||
|
<VcPagination
|
||||||
|
selectComponentClass={VcSelect}
|
||||||
|
showSizeChanger
|
||||||
|
showQuickJumper={{ goButton: <button>确定</button> }}
|
||||||
|
defaultPageSize={20}
|
||||||
|
defaultCurrent={5}
|
||||||
|
onShowSizeChange={this.onShowSizeChange}
|
||||||
|
onChange={this.onChange}
|
||||||
|
total={450}
|
||||||
|
/>
|
||||||
|
<p> default node </p>
|
||||||
|
<VcPagination simple showQuickJumper={{ goButton: true }} defaultCurrent={1} total={50} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
current: 3,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange (page) {
|
||||||
|
console.log(page)
|
||||||
|
this.current = page
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<VcPagination
|
||||||
|
onChange={this.onChange}
|
||||||
|
current={this.current}
|
||||||
|
total={80}
|
||||||
|
showLessItems
|
||||||
|
/>
|
||||||
|
<VcPagination showLessItems defaultCurrent={1} total={60} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<VcPagination defaultCurrent={3} total={450} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
current: 3,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange (page) {
|
||||||
|
console.log(page)
|
||||||
|
this.current = page
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<VcPagination
|
||||||
|
onChange={this.onChange}
|
||||||
|
current={this.current}
|
||||||
|
total={80}
|
||||||
|
showLessItems
|
||||||
|
showTitle={false}
|
||||||
|
/>
|
||||||
|
<VcPagination showLessItems defaultCurrent={1} total={60} showTitle={false} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<VcPagination
|
||||||
|
showTotal={(total) => `Total ${total} items`}
|
||||||
|
total={455}
|
||||||
|
/>
|
||||||
|
<VcPagination
|
||||||
|
showTotal={(total, range) => `${range[0]} - ${range[1]} of ${total} items`}
|
||||||
|
total={455}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<VcPagination
|
||||||
|
defaultCurrent={2}
|
||||||
|
total={25}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import VcSelect from '../../vc-select'
|
||||||
|
import '../assets/index.less'
|
||||||
|
import '../../vc-select/assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
pageSize: 20,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onShowSizeChange (current, pageSize) {
|
||||||
|
console.log(current)
|
||||||
|
this.pageSize = pageSize
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div style={{ margin: 10 }}>
|
||||||
|
<VcPagination
|
||||||
|
selectComponentClass={VcSelect}
|
||||||
|
showSizeChanger
|
||||||
|
pageSize={this.pageSize}
|
||||||
|
onShowSizeChange={this.onShowSizeChange}
|
||||||
|
defaultCurrent={3}
|
||||||
|
total={500}
|
||||||
|
/>
|
||||||
|
<VcPagination
|
||||||
|
selectComponentClass={VcSelect}
|
||||||
|
showSizeChanger
|
||||||
|
pageSize={this.pageSize}
|
||||||
|
onShowSizeChange={this.onShowSizeChange}
|
||||||
|
defaultCurrent={3}
|
||||||
|
total={500}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<VcPagination
|
||||||
|
simple
|
||||||
|
defaultCurrent={1}
|
||||||
|
total={50}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script>
|
||||||
|
import VcPagination from '../index'
|
||||||
|
import '../assets/index.less'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<VcPagination
|
||||||
|
defaultCurrent={1}
|
||||||
|
total={25}
|
||||||
|
style={{ margin: '100px' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './Pagination'
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
export default {
|
||||||
|
// Options.jsx
|
||||||
|
items_per_page: '/ oldal', // '/ page',
|
||||||
|
jump_to: 'Ugrás', // 'Goto',
|
||||||
|
jump_to_confirm: 'megerősít', // 'confirm',
|
||||||
|
page: '',
|
||||||
|
|
||||||
|
// Pagination.jsx
|
||||||
|
prev_page: 'Előző oldal', // 'Previous Page',
|
||||||
|
next_page: 'Következő oldal', // 'Next Page',
|
||||||
|
prev_5: 'Előző 5 oldal', // 'Previous 5 Pages',
|
||||||
|
next_5: 'Következő 5 oldal', // 'Next 5 Pages',
|
||||||
|
prev_3: 'Előző 3 oldal', // 'Previous 3 Pages',
|
||||||
|
next_3: 'Következő 3 oldal', // 'Next 3 Pages',
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
export default {
|
||||||
|
// Options.jsx
|
||||||
|
items_per_page: '/ rûpel',
|
||||||
|
jump_to: 'Biçe',
|
||||||
|
jump_to_confirm: 'piştrast bike',
|
||||||
|
page: '',
|
||||||
|
|
||||||
|
// Pagination.jsx
|
||||||
|
prev_page: 'Rûpelê Pêş',
|
||||||
|
next_page: 'Rûpelê Paş',
|
||||||
|
prev_5: '5 Rûpelên Pêş',
|
||||||
|
next_5: '5 Rûpelên Paş',
|
||||||
|
prev_3: '3 Rûpelên Pêş',
|
||||||
|
next_3: '3 Rûpelên Paş',
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
export default {
|
||||||
|
// Options.jsx
|
||||||
|
items_per_page: 'تال/ھەر بەت',
|
||||||
|
jump_to: 'بەتكە سەكرەش',
|
||||||
|
jump_to_confirm: 'مۇقىملاشتۇرۇش',
|
||||||
|
page: 'بەت',
|
||||||
|
// Pagination.jsx
|
||||||
|
prev_page: 'ئالدىنقى',
|
||||||
|
next_page: 'كېيىنكى',
|
||||||
|
prev_5: 'ئالدىغا 5 بەت',
|
||||||
|
next_5: 'كەينىگە 5 بەت',
|
||||||
|
prev_3: 'ئالدىغا 3 بەت',
|
||||||
|
next_3: 'كەينىگە 3 بەت',
|
||||||
|
};
|
||||||
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
||||||
const hashs = window.location.hash.split('/')
|
const hashs = window.location.hash.split('/')
|
||||||
const d = hashs[hashs.length - 1]
|
const d = hashs[hashs.length - 1]
|
||||||
return {
|
return {
|
||||||
component: import(`../components/cascader/demo/${d}`),
|
component: import(`../components/pagination/demo/${d}.vue`),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default [
|
export default [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue