about to use fatih code

This commit is contained in:
Regis 2016-11-08 14:23:16 -07:00
parent 39a8f1aaf4
commit 3d9e368e61
2 changed files with 45 additions and 5 deletions

View file

@ -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>
`, `,

View file

@ -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);