@matrixage/picpic
Version:
A awesome image bed by github pages and github actions.
112 lines • 5.8 kB
HTML
<template id="pagination">
<transition name="up">
<div
class="pagination_wrap w_100 border_box flex justify_center fixed z_index_100"
v-show="visible_nav"
>
<div class="pagination flex justify_center align_center">
<select
id="select_page_size"
name="page_size"
v-model="page_size"
>
<option
v-for="(item,index) in array_page_size"
:key="index"
:value="item"
>{{item!==99999999?item+' /page':'all'}}</option>
</select>
<button
class="btn_option prev"
@click="onPrev"
:disabled="Number(page)-1<=0"
>prev</button>
<div
class="tabbar_items flex align_center"
@click="onPageItem"
>
<button
class="tabbar_item"
:data-page="Number(page)-4"
v-if="Number(page)-4>0"
>{{Number(page)-4}}</button>
<button
class="tabbar_item"
:data-page="Number(page)-3"
v-if="Number(page)-3>0"
>{{Number(page)-3}}</button>
<button
class="tabbar_item"
:data-page="Number(page)-2"
v-if="Number(page)-2>0"
>{{Number(page)-2}}</button>
<button
class="tabbar_item"
:data-page="Number(page)-1"
v-if="Number(page)-1>0"
>{{Number(page)-1}}</button>
<button
class="tabbar_item active"
:data-page="Number(page)"
>{{Number(page)}}</button>
<button
class="tabbar_item"
:data-page="Number(page)+1"
:disabled="Number(page)+1>chunk_data.length"
>{{Number(page)+1}}</button>
<button
class="tabbar_item"
:data-page="Number(page)+2"
:disabled="Number(page)+2>chunk_data.length"
>{{Number(page)+2}}</button>
<button
class="tabbar_item"
:data-page="Number(page)+3"
:disabled="Number(page)+3>chunk_data.length"
>{{Number(page)+3}}</button>
<button
class="tabbar_item"
:data-page="Number(page)+4"
:disabled="Number(page)+4>chunk_data.length"
>{{Number(page)+4}}</button>
<button
class="tabbar_item"
:data-page="Number(page)+5"
v-if="page<5"
:disabled="Number(page)+5>chunk_data.length"
>{{Number(page)+5}}</button>
<button
class="tabbar_item"
:data-page="Number(page)+6"
v-if="page<4"
:disabled="Number(page)+6>chunk_data.length"
>{{Number(page)+6}}</button>
<button
class="tabbar_item"
:data-page="Number(page)+7"
v-if="page<3"
:disabled="Number(page)+7>chunk_data.length"
>{{Number(page)+7}}</button>
<button
class="tabbar_item"
:data-page="Number(page)+8"
v-if="page<2"
:disabled="Number(page)+8>chunk_data.length"
>{{Number(page)+8}}</button>
</div>
<button
class="btn_option next"
@click="onNext"
:disabled="Number(page)+1>chunk_data.length"
>next</button>
<input
id="input_page"
ref="input_page"
type="number"
placeholder="jump to"
@keydown="onEnterPage"
>
</div>
</div>
</transition>
</template>