about to use fatih code
This commit is contained in:
parent
39a8f1aaf4
commit
3d9e368e61
2 changed files with 45 additions and 5 deletions
|
@ -10,6 +10,9 @@
|
||||||
],
|
],
|
||||||
methods: {
|
methods: {
|
||||||
pagestatus(n) {
|
pagestatus(n) {
|
||||||
|
if (this.getItems[1].prev) {
|
||||||
|
if (n === +this.pagenum) return true;
|
||||||
|
}
|
||||||
if (n - 1 === +this.pagenum) return true;
|
if (n - 1 === +this.pagenum) return true;
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
@ -27,12 +30,17 @@
|
||||||
const pages = this.createSection(+this.last + 1);
|
const pages = this.createSection(+this.last + 1);
|
||||||
pages.shift();
|
pages.shift();
|
||||||
|
|
||||||
items.push({ text: 'Prev', class: this.prevstatus() });
|
if (+this.pagenum > 1) items.push({ text: 'First', first: true });
|
||||||
|
|
||||||
pages.forEach(i => items.push({ text: i }));
|
items.push({ text: 'Prev', prev: true, class: this.prevstatus() });
|
||||||
|
|
||||||
if (+this.pagenum < this.last) items.push({ text: 'Next' });
|
pages.forEach(i => items.push({ text: i, number: true }));
|
||||||
if (+this.pagenum !== this.last) items.push({ text: 'Last »' });
|
|
||||||
|
let nextDisabled = false;
|
||||||
|
if (+this.pagenum === this.last) { nextDisabled = true; }
|
||||||
|
items.push({ text: 'Next', next: true, disabled: nextDisabled });
|
||||||
|
|
||||||
|
if (+this.pagenum !== this.last) items.push({ text: 'Last »', last: true });
|
||||||
|
|
||||||
return items;
|
return items;
|
||||||
},
|
},
|
||||||
|
@ -40,9 +48,40 @@
|
||||||
template: `
|
template: `
|
||||||
<div class="gl-pagination">
|
<div class="gl-pagination">
|
||||||
<ul class="pagination clearfix" v-for='(item, i) in getItems'>
|
<ul class="pagination clearfix" v-for='(item, i) in getItems'>
|
||||||
<li :class="{active: pagestatus(i + 1), disabled: prevstatus(i)}">
|
<!-- if defined as the first button, render first -->
|
||||||
|
<li
|
||||||
|
v-if='item.first'
|
||||||
|
>
|
||||||
|
<span @click='changepage($event)'>{{item.text}}</span>
|
||||||
|
</li>
|
||||||
|
<!-- if defined as the prev button, render prev -->
|
||||||
|
<li
|
||||||
|
:class="{disabled: prevstatus(i)}"
|
||||||
|
v-if='item.prev'
|
||||||
|
>
|
||||||
|
<span @click='changepage($event)'>{{item.text}}</span>
|
||||||
|
</li>
|
||||||
|
<!-- if defined as the next button, render next -->
|
||||||
|
<li
|
||||||
|
v-if='item.next'
|
||||||
|
:class="{disabled: item.disabled}"
|
||||||
|
>
|
||||||
|
<span @click='changepage($event)'>{{item.text}}</span>
|
||||||
|
</li>
|
||||||
|
<!-- if defined as the last button, render last -->
|
||||||
|
<li
|
||||||
|
v-if='item.last'
|
||||||
|
:class="{disabled: item.disabled}"
|
||||||
|
>
|
||||||
<span @click='changepage($event, last)'>{{item.text}}</span>
|
<span @click='changepage($event, last)'>{{item.text}}</span>
|
||||||
</li>
|
</li>
|
||||||
|
<!-- if defined as the number button, render number -->
|
||||||
|
<li
|
||||||
|
:class="{active: pagestatus((i))}"
|
||||||
|
v-if='item.number'
|
||||||
|
>
|
||||||
|
<span @click='changepage($event)'>{{item.text}}</span>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
|
@ -41,6 +41,7 @@
|
||||||
if (text === 'Last »') this.pagenum = last;
|
if (text === 'Last »') this.pagenum = last;
|
||||||
if (text === 'Next') this.pagenum = +this.pagenum + 1;
|
if (text === 'Next') this.pagenum = +this.pagenum + 1;
|
||||||
if (text === 'Prev') this.pagenum = +this.pagenum - 1;
|
if (text === 'Prev') this.pagenum = +this.pagenum - 1;
|
||||||
|
if (text === 'First') this.pagenum = 1;
|
||||||
|
|
||||||
window.history.pushState({}, null, `?p=${this.pagenum}`);
|
window.history.pushState({}, null, `?p=${this.pagenum}`);
|
||||||
clearInterval(this.intervalId);
|
clearInterval(this.intervalId);
|
||||||
|
|
Loading…
Reference in a new issue