优化翻页效果(同步更新)

src/components/DashBoard.vue

@@ -124,6 +124,7 @@
       在线预览<hr>
       <span style="display: inline-block">在线预览分页页数:</span>
       <input v-model="lengthPerPage">
+      (建议为3的倍数，因为固定了一行三张)
     </div>
     <template #footer>
       <el-button type="primary" @click="saveConfig">保存</el-button>
@@ -538,8 +539,14 @@ function saveConfig(){
     }
   }
 
-  store.state.lengthPerPage = Number(lengthPerPage.value)
-  localStorage.setItem("lengthPerPage", lengthPerPage.value)
+  if(lengthPerPage.value < 0 || lengthPerPage.value > 30) {
+    ElMessage("分页页数设置错误，范围1~30")
+    lengthPerPage.value = 30
+  }
+  else {
+    store.state.lengthPerPage = Number(lengthPerPage.value)
+    localStorage.setItem("lengthPerPage", lengthPerPage.value)
+  }
   localStorage.setItem("darkConfig", JSON.stringify(darkConfig.value))
   isConfig.value = false
   adjustForStyle()

src/components/OnlineReader.vue

@@ -9,6 +9,7 @@ let links = ref()
 let index = ref(0)
 let temp_index = ref(0)   //用于跳转
 let max = ref(0)
+let current_page = 0
 let lengthPerPage = computed(() => {
   return store.state.lengthPerPage
 })
@@ -43,6 +44,39 @@ function closeDialog(){
   onlineReadingScrollbar.value.setScrollTop(0)
   emit("close")
 }
+
+function switch_page(target_page){
+  console.log(current_page, target_page)
+  //上一页
+  if(target_page > (current_page + 1) && current_page === 0 && index.value > 0) {
+    console.log("上一页")
+    document.querySelector("span.el-image-viewer__btn.el-image-viewer__close").click()
+    jump(index.value - 1)
+    onlineReadingScrollbar.value.setScrollTop(onlineReadingScrollbar.value.wrapRef.scrollHeight)
+    let top = 0
+    let timer = setInterval(() => {
+      if(onlineReadingScrollbar.value.scrollTop === top){
+        clearInterval(timer)
+        document.querySelector("div.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default > div > div:last-child > img").click()
+      }
+      top = onlineReadingScrollbar.value.scrollTop
+      onlineReadingScrollbar.value.setScrollTop(onlineReadingScrollbar.value.wrapRef.scrollHeight)
+    }, 100)
+  //下一页
+  }else if(target_page === 0 && current_page === lengthPerPage.value - 1 && index.value < max.value){
+    console.log("下一页")
+    jump(index.value + 1)
+    current_page = 0
+    document.querySelector("div.el-scrollbar__wrap.el-scrollbar__wrap--hidden-default > div > div:nth-child(1) > img").click()
+  }
+  else{
+    current_page = target_page
+  }
+}
+
+function set_current_page(page){
+  current_page = page
+}
 </script>
 
 <template>
@@ -56,7 +90,8 @@ function closeDialog(){
     </template>
     <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'}"
-                :preview-src-list="currentGallery.images" :initial-index="index * lengthPerPage + i" lazy/>
+                :preview-src-list="links" :initial-index="i" @switch="switch_page" @show="set_current_page(i)">
+      </el-image>
     </el-scrollbar>
 
 <!--    十页以下-->