添加了切换页码的大箭头

src/App.vue

@@ -6,6 +6,22 @@
       v-show="isLoading"
       v-show="isLoading"
       alt="loading"
       alt="loading"
     />
     />
+    <div class="pageControll">
+      <i
+        :class="['jiantou', 'jiantou-left']"
+        v-show="pageIndex === 1 ? false : true"
+        title="上一页"
+        @click="previous"
+        >&#xe633;</i
+      >
+      <i
+        :class="['jiantou', 'jiantou-right']"
+        v-show="pageIndex === pageLength ? false : true"
+        title="下一页"
+        @click="next"
+        >&#xe633;</i
+      >
+    </div>
     <div class="toolbar">
     <div class="toolbar">
       <div id="toolbarContainer">
       <div id="toolbarContainer">
         <div id="toolbarViewer">
         <div id="toolbarViewer">
@@ -484,12 +500,14 @@ export default {
               "30%"
               "30%"
             );
             );
           }
           }
-          setTimeout(() => {
-            this.isLoading = false;
-          }, 1500);
           if (!!fn && typeof fn == "function") {
           if (!!fn && typeof fn == "function") {
             fn(data);
             fn(data);
           }
           }
+        },
+        complete: () => {
+          setTimeout(() => {
+            this.isLoading = false;
+          }, 1500);
         }
         }
       });
       });
     },
     },
@@ -567,6 +585,7 @@ export default {
 
 
 <style lang="scss">
 <style lang="scss">
 @import url("./css/viewer.css");
 @import url("./css/viewer.css");
+$jiantouPst: 30px;
 * {
 * {
   scrollbar-width: none;
   scrollbar-width: none;
 }
 }
@@ -600,4 +619,34 @@ export default {
   transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   z-index: 99;
   z-index: 99;
 }
 }
+.pageControll {
+  width: 100%;
+  left: 50%;
+  top: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 99;
+  box-sizing: border-box;
+}
+.jiantou-right {
+  position: absolute;
+  right: $jiantouPst;
+  transform: rotateY(180deg);
+  cursor: pointer;
+  opacity: 0.5;
+}
+.jiantou-left {
+  position: absolute;
+  left: $jiantouPst;
+  cursor: pointer;
+  opacity: 0.5;
+}
+.jiantou:hover {
+  color: #fff;
+  border: 1px solid #fff;
+  padding: 0 30px;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 5px;
+  opacity: 1;
+}
 </style>
 </style>

src/css/viewer.css

@@ -1922,4 +1922,21 @@ html[dir='rtl'] .toolbarButton.draggrad::before {
      display: none;
      display: none;
    }
    }
  }
  }
- 
+ 
\ No newline at end of file
+ @font-face {
+  font-family: 'iconfont';
+  src: url('../assets/iconfog/iconfont.eot');
+  src: url('../assets/iconfog/iconfont.eot?#iefix') format('embedded-opentype'),
+      url('../assets/iconfog/iconfont.woff2') format('woff2'),
+      url('../assets/iconfog/iconfont.woff') format('woff'),
+      url('../assets/iconfog/iconfont.ttf') format('truetype'),
+      url('../assets/iconfog/iconfont.svg#iconfont') format('svg');
+}
+
+.jiantou {
+  font-family: "iconfont" !important;
+  font-size: 40px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
\ No newline at end of file