element-pagination
Advanced tools
Comparing version 1.1.0 to 2.0.0
{ | ||
"name": "element-pagination", | ||
"version": "1.1.0", | ||
"version": "2.0.0", | ||
"description": "A pagination component for Vue.js.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -16,3 +16,3 @@ # element-pagination | ||
import ElPagination from 'element-pagination' | ||
import 'element-theme-default/dist/pagination.css' | ||
import 'element-theme-chalk/dist/pagination.css' | ||
@@ -19,0 +19,0 @@ Vue.use(ElPagination) |
import Pager from './pager.vue'; | ||
import ElSelect from 'element-ui/packages/select'; | ||
import ElOption from 'element-ui/packages/option'; | ||
import ElInput from 'element-ui/packages/input'; | ||
import Locale from 'element-ui/src/mixins/locale'; | ||
import { valueEquals } from 'element-ui/src/utils/util'; | ||
@@ -35,3 +37,11 @@ export default { | ||
} | ||
} | ||
}, | ||
popperClass: String, | ||
prevText: String, | ||
nextText: String, | ||
background: Boolean | ||
}, | ||
@@ -47,3 +57,6 @@ | ||
render(h) { | ||
let template = <div class='el-pagination'></div>; | ||
let template = <div class={['el-pagination', { | ||
'is-background': this.background, | ||
'el-pagination--small': this.small | ||
}] }></div>; | ||
const layout = this.layout || ''; | ||
@@ -64,6 +77,2 @@ if (!layout) return; | ||
if (this.small) { | ||
template.data.class += ' el-pagination--small'; | ||
} | ||
components.forEach(compo => { | ||
@@ -106,3 +115,7 @@ if (compo === '->') { | ||
on-click={ this.$parent.prev }> | ||
<i class="el-icon el-icon-arrow-left"></i> | ||
{ | ||
this.$parent.prevText | ||
? <span>{ this.$parent.prevText }</span> | ||
: <i class="el-icon el-icon-arrow-left"></i> | ||
} | ||
</button> | ||
@@ -123,3 +136,7 @@ ); | ||
on-click={ this.$parent.next }> | ||
<i class="el-icon el-icon-arrow-right"></i> | ||
{ | ||
this.$parent.nextText | ||
? <span>{ this.$parent.nextText }</span> | ||
: <i class="el-icon el-icon-arrow-right"></i> | ||
} | ||
</button> | ||
@@ -140,5 +157,6 @@ ); | ||
immediate: true, | ||
handler(value) { | ||
if (Array.isArray(value)) { | ||
this.$parent.internalPageSize = value.indexOf(this.$parent.pageSize) > -1 | ||
handler(newVal, oldVal) { | ||
if (valueEquals(newVal, oldVal)) return; | ||
if (Array.isArray(newVal)) { | ||
this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1 | ||
? this.$parent.pageSize | ||
@@ -156,2 +174,3 @@ : this.pageSizes[0]; | ||
value={ this.$parent.internalPageSize } | ||
popperClass={ `${this.$parent.popperClass || ''} is-arrow-fixed` } | ||
on-input={ this.handleChange }> | ||
@@ -162,3 +181,3 @@ { | ||
value={ item } | ||
label={ item + ' ' + this.t('el.pagination.pagesize') }> | ||
label={ item + this.t('el.pagination.pagesize') }> | ||
</el-option> | ||
@@ -196,2 +215,4 @@ ) | ||
components: { ElInput }, | ||
methods: { | ||
@@ -201,6 +222,25 @@ handleFocus(event) { | ||
}, | ||
handleChange({ target }) { | ||
this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(target.value); | ||
handleBlur({ target }) { | ||
this.resetValueIfNeed(target.value); | ||
this.reassignMaxValue(target.value); | ||
}, | ||
handleChange(value) { | ||
this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value); | ||
this.oldValue = null; | ||
this.resetValueIfNeed(value); | ||
}, | ||
resetValueIfNeed(value) { | ||
const num = parseInt(value, 10); | ||
if (!isNaN(num)) { | ||
if (num < 1) { | ||
this.$refs.input.$el.querySelector('input').value = 1; | ||
} else { | ||
this.reassignMaxValue(value); | ||
} | ||
} | ||
}, | ||
reassignMaxValue(value) { | ||
if (+value > this.$parent.internalPageCount) { | ||
this.$refs.input.$el.querySelector('input').value = this.$parent.internalPageCount; | ||
} | ||
} | ||
@@ -213,11 +253,13 @@ }, | ||
{ this.t('el.pagination.goto') } | ||
<input | ||
class="el-pagination__editor" | ||
type="number" | ||
<el-input | ||
class="el-pagination__editor is-in-pagination" | ||
min={ 1 } | ||
max={ this.internalPageCount } | ||
max={ this.$parent.internalPageCount } | ||
value={ this.$parent.internalCurrentPage } | ||
on-change={ this.handleChange } | ||
on-focus={ this.handleFocus } | ||
number/> | ||
domPropsValue={ this.$parent.internalCurrentPage } | ||
type="number" | ||
ref="input" | ||
onChange={ this.handleChange } | ||
onFocus={ this.handleFocus } | ||
onBlur={ this.handleBlur }/> | ||
{ this.t('el.pagination.pageClassifier') } | ||
@@ -224,0 +266,0 @@ </span> |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
97478
337