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

src/components/DashBoard.vue

@@ -547,8 +547,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
 })
@@ -44,6 +45,40 @@ function closeDialog(){
   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>
@@ -57,7 +92,7 @@ function closeDialog(){
     </template>
     <el-scrollbar height="75vh" ref="onlineReadingScrollbar">
       <el-image v-for="(link, i) in links" :src="link" :style="{'width': 'auto', 'text-align': 'center', 'background-color': 'ghostwhite'}"
-                :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-scrollbar>
 
     <!--五页以下-->