129 lines
3.2 KiB
Vue
129 lines
3.2 KiB
Vue
|
|
import PropTypes from '../_util/vue-types'
|
|
import KEYCODE from './KeyCode'
|
|
import BaseMixin from '../_util/BaseMixin'
|
|
|
|
export default {
|
|
mixins: [BaseMixin],
|
|
props: {
|
|
rootPrefixCls: PropTypes.String,
|
|
selectPrefixCls: PropTypes.String,
|
|
changeSize: PropTypes.func,
|
|
quickGo: PropTypes.func,
|
|
selectComponentClass: PropTypes.any,
|
|
current: PropTypes.number,
|
|
pageSizeOptions: PropTypes.array.def(['10', '20', '30', '40']),
|
|
pageSize: PropTypes.number,
|
|
buildOptionText: PropTypes.func,
|
|
locale: PropTypes.object,
|
|
goButton: PropTypes.any,
|
|
},
|
|
data () {
|
|
return {
|
|
goInputText: '',
|
|
}
|
|
},
|
|
methods: {
|
|
defaultBuildOptionText (opt) {
|
|
return `${opt.value} ${this.locale.items_per_page}`
|
|
},
|
|
handleChange (e) {
|
|
this.setState({
|
|
goInputText: e.target.value,
|
|
})
|
|
},
|
|
go (e) {
|
|
let val = this.goInputText
|
|
if (val === '') {
|
|
return
|
|
}
|
|
val = isNaN(val) ? this.current : Number(val)
|
|
if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
|
|
this.setState({
|
|
goInputText: '',
|
|
})
|
|
this.quickGo(val)
|
|
}
|
|
},
|
|
},
|
|
render () {
|
|
const { rootPrefixCls, locale, changeSize, quickGo, goButton, selectComponentClass: Select, defaultBuildOptionText } = this
|
|
const prefixCls = `${rootPrefixCls}-options`
|
|
let changeSelect = null
|
|
let goInput = null
|
|
let gotoButton = null
|
|
|
|
if (!(changeSize || quickGo)) {
|
|
return null
|
|
}
|
|
|
|
if (changeSize && Select) {
|
|
const Option = Select.Option
|
|
const pageSize = this.pageSize || this.pageSizeOptions[0]
|
|
const buildOptionText = this.buildOptionText || defaultBuildOptionText
|
|
const options = this.pageSizeOptions.map((opt, i) => (
|
|
<Option key={i} value={opt}>{buildOptionText({ value: opt })}</Option>
|
|
))
|
|
|
|
changeSelect = (
|
|
<Select
|
|
prefixCls={this.selectPrefixCls}
|
|
showSearch={false}
|
|
class={`${prefixCls}-size-changer`}
|
|
optionLabelProp='children'
|
|
dropdownMatchSelectWidth={false}
|
|
value={pageSize.toString()}
|
|
onChange={value => this.changeSize(Number(value))}
|
|
getPopupContainer={triggerNode => triggerNode.parentNode}
|
|
>
|
|
{options}
|
|
</Select>
|
|
)
|
|
}
|
|
|
|
if (quickGo) {
|
|
if (goButton) {
|
|
if (typeof goButton === 'boolean') {
|
|
gotoButton = (
|
|
<button
|
|
type='button'
|
|
onClick={this.go}
|
|
onKeyup={this.go}
|
|
>
|
|
{locale.jump_to_confirm}
|
|
</button>
|
|
)
|
|
} else {
|
|
gotoButton = (
|
|
<span
|
|
onClick={this.go}
|
|
onKeyup={this.go}
|
|
>{goButton}</span>
|
|
)
|
|
}
|
|
}
|
|
goInput = (
|
|
<div class={`${prefixCls}-quick-jumper`}>
|
|
{locale.jump_to}
|
|
<input
|
|
type='text'
|
|
value={this.goInputText}
|
|
onInput={this.handleChange}
|
|
onKeyup={this.go}
|
|
/>
|
|
{locale.page}
|
|
{gotoButton}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<li class={`${prefixCls}`}>
|
|
{changeSelect}
|
|
{goInput}
|
|
</li>
|
|
)
|
|
},
|
|
}
|
|
|