element ui源碼的版本是2.4.9 pagination.js pager.vue ...
element-ui源碼的版本是2.4.9
pagination.js
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';
export default {
name: 'ElPagination',
props: {
pageSize: { //每頁顯示條目個數，支持.sync 修飾符
type: Number,
default: 10
},
small: Boolean, //是否使用小型分頁樣式
total: Number, //總條目數
pageCount: Number, //總頁數，total 和 page-count 設置任意一個就可以達到顯示頁碼的功能；如果要支持 page-sizes 的更改，則需要使用 total 屬性
pagerCount: { //頁碼按鈕的數量，當總頁數超過該值時會摺疊
type: Number,
validator(value) {
return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;
},
default: 7
},
currentPage: { //當前頁數，支持 .sync 修飾符
type: Number,
default: 1
},
layout: { //組件佈局，子組件名用逗號分隔
default: 'prev, pager, next, jumper, ->, total'
},
pageSizes: { //每頁顯示個數選擇器的選項設置
type: Array,
default() {
return [10, 20, 30, 40, 50, 100];
}
},
popperClass: String, //每頁顯示個數選擇器的下拉框類名
prevText: String, //替代圖標顯示的上一頁文字
nextText: String, //替代圖標顯示的下一頁文字
background: Boolean, //是否為分頁按鈕添加背景色
disabled: Boolean //是否禁用
},
data() {
return {
internalCurrentPage: 1, //當前的頁碼
internalPageSize: 0, //總頁數
lastEmittedPage: -1,
userChangePageSize: false
};
},
//render函數生成el-pagination
render(h) {
//最外層的div標簽
let template = <div class={['el-pagination', {
'is-background': this.background,
'el-pagination--small': this.small
}] }></div>;
const layout = this.layout || '';
if (!layout) return;
const TEMPLATE_MAP = {
prev: <prev></prev>,
jumper: <jumper></jumper>,
pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } pagerCount={ this.pagerCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
next: <next></next>,
sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
slot: <my-slot></my-slot>,
total: <total></total>
};
const components = layout.split(',').map((item) => item.trim());
const rightWrapper = <div class="el-pagination__rightwrapper"></div>;
let haveRightWrapper = false;
template.children = template.children || [];
rightWrapper.children = rightWrapper.children || [];
components.forEach(compo => {
// ->這個符號主要是將其後面的組件放在rightWrapper中，然後右浮動；如果存在->符號，就將haveRightWrapper為true
if (compo === '->') {
haveRightWrapper = true;
return;
}
// 當haveRightWrapper為true,即在->後面的放入rightWrapper中
if (!haveRightWrapper) {
template.children.push(TEMPLATE_MAP[compo]);
} else {
rightWrapper.children.push(TEMPLATE_MAP[compo]);
}
});
if (haveRightWrapper) {
//將rightWrapper加在template.children數組的開頭，這樣rightWrapper浮動之後就是在最右邊
template.children.unshift(rightWrapper);
}
return template;
},
components: {
MySlot: {
render(h) {
return (
this.$parent.$slots.default
? this.$parent.$slots.default[0]
: ''
);
}
},
// 上一頁組件
Prev: {
//上一頁; prevText用戶設置的替代上一頁圖標的文字，存在顯示文字，不存在顯示上一頁圖標
render(h) {
return (
<button
type="button"
class="btn-prev"
disabled={ this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }
on-click={ this.$parent.prev }>
{
this.$parent.prevText
? <span>{ this.$parent.prevText }</span>
: <i class="el-icon el-icon-arrow-left"></i>
}
</button>
);
}
},
//下一頁組件
Next: {
// this.$parent.internalCurrentPage === this.$parent.internalPageCount 當前頁數等於總頁數時 或者 總頁數等於0時，下一頁按鈕被禁用
render(h) {
return (
<button
type="button"
class="btn-next"
disabled={ this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
on-click={ this.$parent.next }>
{
this.$parent.nextText
? <span>{ this.$parent.nextText }</span>
: <i class="el-icon el-icon-arrow-right"></i>
}
</button>
);
}
},
// 每頁顯示條目個數組件
Sizes: {
mixins: [Locale],
props: {
pageSizes: Array //每頁顯示個數選擇器的選項設置 [10, 20, 30, 40, 50, 100]
},
watch: {
pageSizes: {
// 確認是否以當前的初始值執行handler的函數
immediate: true,
handler(newVal, oldVal) {
if (valueEquals(newVal, oldVal)) return;
if (Array.isArray(newVal)) {
// 如果用戶設置了每頁顯示的條目個數，並且pageSize在設置的pageSizes中存在的話，就顯示pageSize，否則就顯示this.pageSizes[0]
// 最後將每頁顯示的條目個數賦值給this.$parent.internalPageSize
this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1
? this.$parent.pageSize
: this.pageSizes[0];
}
}
}
},
render(h) {
// this.t('el.pagination.pagesize') 返回'條/頁'
return (
<span class="el-pagination__sizes">
<el-select
value={ this.$parent.internalPageSize }
popperClass={ this.$parent.popperClass || '' }
size="mini"
on-input={ this.handleChange }
disabled={ this.$parent.disabled }>
{
this.pageSizes.map(item =>
<el-option
value={ item }
label={ item + this.t('el.pagination.pagesize') }>
</el-option>
)
}
</el-select>
</span>
);
},
components: {
ElSelect,
ElOption
},
methods: {
handleChange(val) {
if (val !== this.$parent.internalPageSize) {
this.$parent.internalPageSize = val = parseInt(val, 10);
this.$parent.userChangePageSize = true;
//如果父組件中pageSize用了.sync 修飾符，這裡將會觸發父組件的update，改變pageSize的值
this.$parent.$emit('update:pageSize', val);
//觸發父組件的size-change事件，將改變的每頁顯示的條目個數的值傳遞出去
this.$parent.$emit('size-change', val);
}
}
}
},
//前往多少頁組件
Jumper: {
mixins: [Locale],
data() {
return {
oldValue: null
};
},
components: { ElInput },
watch: {
'$parent.internalPageSize'() {
this.$nextTick(() => {
this.$refs.input.$el.querySelector('input').value = this.$parent.internalCurrentPage;
});
}
},
methods: {
handleFocus(event) {
this.oldValue = event.target.value;
},
handleBlur({ target }) {
this.resetValueIfNeed(target.value);
this.reassignMaxValue(target.value);
},
// 按下回車，前往多少頁
handleKeyup({ keyCode, target }) {
if (keyCode === 13 && this.oldValue && target.value !== this.oldValue) {
this.handleChange(target.value);
}
},
// 改變當前頁
handleChange(value) {
// 更新頁碼列表中當前頁的值
this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
this.$parent.emitChange();
this.oldValue = null;
this.resetValueIfNeed(value);
},
resetValueIfNeed(value) {
const num = parseInt(value, 10);
if (!isNaN(num)) {
if (num < 1) {
// 調用input中的setCurrentValue方法，將input中的值設置為1
this.$refs.input.setCurrentValue(1);
} else {
// 如果input中輸入的值，大於最大頁碼，則置為最大頁碼值
this.reassignMaxValue(value);
}
}
},
reassignMaxValue(value) {
const { internalPageCount } = this.$parent;
if (+value > internalPageCount) {
// 調用input中的setCurrentValue方法，將input中的值設置為internalPageCount或者為1
this.$refs.input.setCurrentValue(internalPageCount || 1);
}
}
},
// 前往多少頁
render(h) {
return (
<span class="el-pagination__jump">
{ this.t('el.pagination.goto') }
<el-input
class="el-pagination__editor is-in-pagination"
min={ 1 }
max={ this.$parent.internalPageCount }
value={ this.$parent.internalCurrentPage }
domPropsValue={ this.$parent.internalCurrentPage }
type="number"
ref="input"
disabled={ this.$parent.disabled }
nativeOnKeyup={ this.handleKeyup }
onChange={ this.handleChange }
onFocus={ this.handleFocus }
onBlur={ this.handleBlur }/>
{ this.t('el.pagination.pageClassifier') }
</span>
);
}
},
//總共的頁數，組件
Total: {
mixins: [Locale],
render(h) {
return (
typeof this.$parent.total === 'number'
? <span class="el-pagination__total">{ this.t('el.pagination.total', { total: this.$parent.total }) }</span>
: ''
);
}
},
Pager
},
methods: {
handleCurrentChange(val) {
this.internalCurrentPage = this.getValidCurrentPage(val);
this.userChangePageSize = true;
//觸發父組件current-change事件，並傳遞相應的值
this.emitChange();
},
prev() {
if (this.disabled) return;
const newVal = this.internalCurrentPage - 1;
this.internalCurrentPage = this.getValidCurrentPage(newVal);
//觸發父組件的prev-click事件，並將CurrentPage傳遞出去
this.$emit('prev-click', this.internalCurrentPage);
//觸發父組件current-change事件，並傳遞相應的值
this.emitChange();
},
next() {
if (this.disabled) return;
const newVal = this.internalCurrentPage + 1;
this.internalCurrentPage = this.getValidCurrentPage(newVal);
//觸發父組件的next-click事件，並將CurrentPage傳遞出去
this.$emit('next-click', this.internalCurrentPage);
this.emitChange();
},
//校驗需要前往的頁碼的值
getValidCurrentPage(value) {
value = parseInt(value, 10);
const havePageCount = typeof this.internalPageCount === 'number';
let resetValue;
if (!havePageCount) {
if (isNaN(value) || value < 1) resetValue = 1;
} else {
// 如果當前頁碼小於1，則取1；如果當前頁碼大於最大頁碼，則取最大頁碼
if (value < 1) {
resetValue = 1;
} else if (value > this.internalPageCount) {
resetValue = this.internalPageCount;
}
}
//如果當前頁碼是非數字，或者為0，則將當前頁碼置為1，並返回
if (resetValue === undefined && isNaN(value)) {
resetValue = 1;
} else if (resetValue === 0) {
resetValue = 1;
}
return resetValue === undefined ? value : resetValue;
},
emitChange() {
this.$nextTick(() => {
//用戶改變當前PageSize時，觸發父組件的current-change事件
if (this.internalCurrentPage !== this.lastEmittedPage || this.userChangePageSize) {
this.$emit('current-change', this.internalCurrentPage);
//lastEmittedPage記錄最後傳遞的CurrentPage的值
this.lastEmittedPage = this.internalCurrentPage;
this.userChangePageSize = false;
}
});
}
},
computed: {
internalPageCount() {
if (typeof this.total === 'number') {
//總頁數 = 總條目數 / 每頁的顯示條數
return Math.ceil(this.total / this.internalPageSize);
} else if (typeof this.pageCount === 'number') {
//總頁數
return this.pageCount;
}
return null;
}
},
watch: {
currentPage: {
immediate: true,
handler(val) {
this.internalCurrentPage = val;
}
},
pageSize: {
immediate: true,
handler(val) {
this.internalPageSize = isNaN(val) ? 10 : val;
}
},
// internalCurrentPage改變時去觸發父組件中currentPage更新
// 在v2.4.11這裡已經改掉了
internalCurrentPage: {
immediate: true,
handler(newVal, oldVal) {
newVal = parseInt(newVal, 10);
/* istanbul ignore if */
if (isNaN(newVal)) {
newVal = oldVal || 1;
} else {
newVal = this.getValidCurrentPage(newVal);
}
if (newVal !== undefined) {
this.internalCurrentPage = newVal;
if (oldVal !== newVal) {
this.$emit('update:currentPage', newVal);
}
} else {
this.$emit('update:currentPage', newVal);
}
this.lastEmittedPage = -1;
}
},
internalPageCount(newVal) {
/* istanbul ignore if */
const oldPage = this.internalCurrentPage;
if (newVal > 0 && oldPage === 0) {
this.internalCurrentPage = 1;
} else if (oldPage > newVal) {
this.internalCurrentPage = newVal === 0 ? 1 : newVal;
this.userChangePageSize && this.emitChange();
}
this.userChangePageSize = false;
}
}
};
pager.vue
<template>
<!--頁碼列表-->
<ul @click="onPagerClick" class="el-pager">
<!--第一頁-->
<li
:class="{ active: currentPage === 1, disabled }"
v-if="pageCount > 0"
class="number">1</li>
<!--more圖標-->
<li
class="el-icon more btn-quickprev"
:class="[quickprevIconClass, { disabled }]"
v-if="showPrevMore"
@mouseenter="onMouseenter('left')"
@mouseleave="quickprevIconClass = 'el-icon-more'">
</li>
<!--頁碼-->
<li
v-for="pager in pagers"
:key="pager"
:class="{ active: currentPage === pager, disabled }"
class="number">{{ pager }}</li>
<!--more圖標-->
<li
class="el-icon more btn-quicknext"
:class="[quicknextIconClass, { disabled }]"
v-if="showNextMore"
@mouseenter="onMouseenter('right')"
@mouseleave="quicknextIconClass = 'el-icon-more'">
</li>
<!--總頁碼-->
<li
:class="{ active: currentPage === pageCount, disabled }"
class="number"
v-if="pageCount > 1">{{ pageCount }}</li>
</ul>
</template>
<script type="text/babel">
export default {
name: 'ElPager',
props: {
currentPage: Number, //當前頁碼
pageCount: Number, //總頁數
pagerCount: Number, //頁碼按鈕的數量，當總頁數超過該值時會摺疊
disabled: Boolean
},
watch: {
showPrevMore(val) {
if (!val) this.quickprevIconClass = 'el-icon-more';
},
showNextMore(val) {
if (!val) this.quicknextIconClass = 'el-icon-more';
}
},
methods: {
onPagerClick(event) {
const target = event.target;
if (target.tagName === 'UL' || this.disabled) {
return;
}
let newPage = Number(event.target.textContent);
const pageCount = this.pageCount;
const currentPage = this.currentPage;
const pagerCountOffset = this.pagerCount - 2;
//點擊more圖標頁碼顯示計算邏輯
if (target.className.indexOf('more') !== -1) {
if (target.className.indexOf('quickprev') !== -1) {
newPage = currentPage - pagerCountOffset;
} else if (target.className.indexOf('quicknext') !== -1) {
newPage = currentPage + pagerCountOffset;
}
}
/* istanbul ignore if */
if (!isNaN(newPage)) {
if (newPage < 1) {
newPage = 1;
}
if (newPage > pageCount) {
newPage = pageCount;
}
}
if (newPage !== currentPage) {
this.$emit('change', newPage);
}
},
// 滑鼠移入more圖標顯示向左或者向右的圖標
onMouseenter(direction) {
if (this.disabled) return;
if (direction === 'left') {
this.quickprevIconClass = 'el-icon-d-arrow-left';
} else {
this.quicknextIconClass = 'el-icon-d-arrow-right';
}
}
},
computed: {
pagers() {
// pagerCount頁碼按鈕的數量(大於等於 5 且小於等於 21 的奇數)
const pagerCount = this.pagerCount;
// 按鈕的一半數量
const halfPagerCount = (pagerCount - 1) / 2;
// 當前頁碼數
const currentPage = Number(this.currentPage);
// 總頁數
const pageCount = Number(this.pageCount);
// 左邊的more圖標
let showPrevMore = false;
// 右邊的more圖標
let showNextMore = false;
// 如果總頁碼數大於要顯示的頁碼按鈕數量
if (pageCount > pagerCount) {
// 如果當前頁碼大於（要顯示的頁碼按鈕數量-一半的頁碼按鈕數量）
if (currentPage > pagerCount - halfPagerCount) {
// 顯示左邊的more圖標
showPrevMore = true;
}
// 如果當前頁碼小於（要顯示的頁碼按鈕數量-一半的頁碼按鈕數量）
if (currentPage < pageCount - halfPagerCount) {
// 顯示右邊的more圖標
showNextMore = true;
}
}
const array = [];
//如果左邊的more圖標存在，右邊的more圖標不存在
if (showPrevMore && !showNextMore) {
const startPage = pageCount - (pagerCount - 2);
for (let i = startPage; i < pageCount; i++) {
array.push(i);
}
} else if (!showPrevMore && showNextMore) { //如果左邊的more圖標不存在，右邊的more圖標存在
for (let i = 2; i < pagerCount; i++) {
array.push(i);
}
} else if (showPrevMore && showNextMore) { //如果左右more圖標都存在
// Math.floor() 返回小於或等於一個給定數字的最大整數。
const offset = Math.floor(pagerCount / 2) - 1;
for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
array.push(i);
}
} else {
for (let i = 2; i < pageCount; i++) {
array.push(i);
}
}
this.showPrevMore = showPrevMore;
this.showNextMore = showNextMore;
return array;
}
},
data() {
return {
current: null,
showPrevMore: false,
showNextMore: false,
quicknextIconClass: 'el-icon-more',
quickprevIconClass: 'el-icon-more'
};
}
};
</script>
