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: {
|
||||
pagestatus(n) {
|
||||
if (this.getItems[1].prev) {
|
||||
if (n === +this.pagenum) return true;
|
||||
}
|
||||
if (n - 1 === +this.pagenum) return true;
|
||||
return false;
|
||||
},
|
||||
|
@ -27,12 +30,17 @@
|
|||
const pages = this.createSection(+this.last + 1);
|
||||
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' });
|
||||
if (+this.pagenum !== this.last) items.push({ text: 'Last »' });
|
||||
pages.forEach(i => items.push({ text: i, number: true }));
|
||||
|
||||
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;
|
||||
},
|
||||
|
@ -40,9 +48,40 @@
|
|||
template: `
|
||||
<div class="gl-pagination">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
@ -41,6 +41,7 @@
|
|||
if (text === 'Last »') this.pagenum = last;
|
||||
if (text === 'Next') 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}`);
|
||||
clearInterval(this.intervalId);
|
||||
|
|
Loading…
Reference in a new issue