给每页添加页数下标,防止因为乱序加载导致分不清页数(同步更新)

This commit is contained in:
chuzhongzai 2023-12-28 10:58:34 +08:00
parent 8897e73aa8
commit e0ec08c874

View File

@ -78,16 +78,21 @@ function set_current_page(page){
<template> <template>
<el-dialog v-model="isShowUp" width="90%" style="margin-top: 0; margin-bottom: 0; padding: 0" @close="closeDialog"> <el-dialog v-model="isShowUp" width="90%" style="margin-top: 0; margin-bottom: 0; padding: 0" @close="closeDialog">
<template #header style="padding-bottom: 0"> <template #header style="padding-bottom: 0">
在线预览: {{readingGallery.name}} 页数{{readingGallery.pages}}<br> 在线预览: {{readingGallery.name}}<br>
页数{{readingGallery.pages}}<br>
<div style="font-size: 3vh; display: inline" v-if="max > 0"> <div style="font-size: 3vh; display: inline" v-if="max > 0">
{{ index + 1 }} - {{ (index) * lengthPerPage + 1 }} ~ {{ index + 1 }} - {{ (index) * lengthPerPage + 1 }} ~
{{ (index + 1) * lengthPerPage + 1 > readingGallery.images.length ? readingGallery.images.length : (index + 1) * lengthPerPage }} {{ (index + 1) * lengthPerPage + 1 > readingGallery.images.length ? readingGallery.images.length : (index + 1) * lengthPerPage }}
</div> </div>
</template> </template>
<el-scrollbar height="75vh" ref="onlineReadingScrollbar"> <el-scrollbar height="75vh" ref="onlineReadingScrollbar">
<el-image v-for="(link, i) in links" :src="link" :style="{'width': store.state.imageWidth, 'padding-right': store.state.imagePadding, 'background-color': 'gary'}" <div v-for="(link, i) in links" style="display: inline-block; text-align: center">
:preview-src-list="links" :initial-index="i" @switch="switch_page" @show="set_current_page(i)" loading="lazy"> <el-image :src="link" :style="{'width': store.state.imageWidth, 'padding-right': store.state.imagePadding, 'background-color': 'gary'}"
</el-image> :preview-src-list="links" :initial-index="i" @switch="switch_page" @show="set_current_page(i)" loading="lazy"/><br>
{{lengthPerPage * index + i + 1}}
</div>
</el-scrollbar> </el-scrollbar>
<!-- 十页以下--> <!-- 十页以下-->