github.com/soulteary/pocket-bookcase@v0.0.0-20240428065142-0b5a9a0fc98a/internal/view/assets/js/component/pagination.js (about) 1 var template = ` 2 <div class="pagination-box"> 3 <p>Page</p> 4 <input type="text" 5 placeholder="1" 6 :value="page" 7 @focus="$event.target.select()" 8 @keyup.enter="changePage($event.target.value)" 9 :disabled="editMode"> 10 <p>{{maxPage}}</p> 11 <div class="spacer"></div> 12 <template v-if="!editMode"> 13 <a v-if="page > 2" title="Go to first page" @click="changePage(1)"> 14 <i class="fas fa-fw fa-angle-double-left"></i> 15 </a> 16 <a v-if="page > 1" title="Go to previous page" @click="changePage(page-1)"> 17 <i class="fa fa-fw fa-angle-left"></i> 18 </a> 19 <a v-if="page < maxPage" title="Go to next page" @click="changePage(page+1)"> 20 <i class="fa fa-fw fa-angle-right"></i> 21 </a> 22 <a v-if="page < maxPage - 1" title="Go to last page" @click="changePage(maxPage)"> 23 <i class="fas fa-fw fa-angle-double-right"></i> 24 </a> 25 </template> 26 </div>`; 27 28 export default { 29 template: template, 30 props: { 31 page: Number, 32 maxPage: Number, 33 editMode: Boolean, 34 }, 35 methods: { 36 changePage(page) { 37 page = parseInt(page, 10) || 0; 38 if (page >= this.maxPage) page = this.maxPage; 39 else if (page <= 1) page = 1; 40 41 this.$emit("change", page); 42 }, 43 }, 44 };