50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
/* global Vue, gl */
|
|
/* eslint-disable no-param-reassign */
|
|
|
|
((gl) => {
|
|
gl.VueGlPagination = Vue.extend({
|
|
props: [
|
|
'changepage',
|
|
'count',
|
|
'pagenum',
|
|
],
|
|
methods: {
|
|
pagestatus(n) {
|
|
if (n - 1 === +this.pagenum) return true;
|
|
return false;
|
|
},
|
|
prevstatus(index) {
|
|
if (index > 0) return false;
|
|
if (+this.pagenum < 2) return true;
|
|
return false;
|
|
},
|
|
createSection(n) { return Array.from(Array(n)).map((e, i) => i); },
|
|
},
|
|
computed: {
|
|
last() { return Math.ceil(+this.count / 5); },
|
|
getItems() {
|
|
const items = [];
|
|
const pages = this.createSection(+this.last + 1);
|
|
pages.shift();
|
|
|
|
items.push({ text: 'Prev', class: this.prevstatus() });
|
|
|
|
pages.forEach(i => items.push({ text: i }));
|
|
|
|
if (+this.pagenum < this.last) items.push({ text: 'Next' });
|
|
if (+this.pagenum !== this.last) items.push({ text: 'Last »' });
|
|
|
|
return items;
|
|
},
|
|
},
|
|
template: `
|
|
<div class="gl-pagination">
|
|
<ul class="pagination clearfix" v-for='(item, i) in getItems'>
|
|
<li :class="{active: pagestatus(i + 1), disabled: prevstatus(i)}">
|
|
<span @click='changepage($event, last)'>{{item.text}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
`,
|
|
});
|
|
})(window.gl || (window.gl = {}));
|