next page

@@ -33,8 +33,6 @@ router.afterEach(() => {
     window.scrollTo(0, 0);
 });
 
-
-
 new Vue({
     el: '#app',
     router: router,

 <style scoped>
-.layout{
-    background: #f5f7f9;
-    position: relative;
-    overflow: hidden;
+.layout {
+  background: #f5f7f9;
+  position: relative;
+  overflow: hidden;
 }
-.layout-logo{
-    width: 100px;
-    height: 30px;
-    background: #5b6270;
-    border-radius: 3px;
-    float: left;
-    position: relative;
-    top: 15px;
-    left: 20px;
+.layout-logo {
+  width: 100px;
+  height: 30px;
+  background: #5b6270;
+  border-radius: 3px;
+  float: left;
+  position: relative;
+  top: 15px;
+  left: 20px;
 }
-.layout-nav{
-    width: 420px;
-    margin: 0 auto;
-    margin-right: 20px;
+.layout-nav {
+  width: 420px;
+  margin: 0 auto;
+  margin-right: 20px;
 }
 .layout-footer-center {
   text-align: center;
@@ -66,25 +66,17 @@
     </div>
 </template>
 <script>
-    export default {
-
-        created() {
-          this.$router.push({name: 'similar.list'})
-        },
-        methods: {
-          open(name) {
-            this.$router.push({name})
-          },
-          goTop() {
-            this.$refs.backtop.back()
-          },
-          goNext() {
-            this.$bus.emit('gonext')
-          },
-          goBack() {
-            this.$bus.emit('goback')
-          }
-
-        }
+export default {
+  created() {
+    this.$router.push({ name: "similar.list" });
+  },
+  methods: {
+    open(name) {
+      this.$router.push({ name });
+    },
+    goTop() {
+      this.$refs.backtop.back();
     }
+  }
+};
 </script>
\ No newline at end of file

@@ -29,7 +29,7 @@
       </Form>
   </div>
   <Table :columns="columns" :data="list"></Table>
-  <Page :total="pager.rows" :current="pager.page" :page-size="pager.size" @on-change="onPageChange" show-elevator style="margin-top:20px;text-align: right;"></Page>
+  <Page ref="page" :total="pager.rows" :current="pager.page" :page-size="pager.size" @on-change="onPageChange" show-elevator style="margin-top:20px;text-align: right;"></Page>
 </div>
 </template>
 <script>
@@ -53,7 +53,7 @@ export default {
               }
             });
           },
-          className: 'top'
+          className: "top"
         },
         {
           title: "相似图",
@@ -83,7 +83,7 @@ export default {
               </div>
             );
           },
-          className: 'top'
+          className: "top"
         }
       ],
       list: [],
@@ -107,6 +107,12 @@ export default {
     this.api = new ApiService();
     this.getList();
   },
+  mounted() {
+    document.addEventListener("keydown", this.keydown);
+  },
+  destroyed() {
+    document.removeEventListener("keydown", this.keydown);
+  },
   methods: {
     onPageChange(page) {
       this.pager.page = page;
@@ -160,7 +166,7 @@ export default {
           this.pager.size = result.size;
 
           this.$nextTick(() => {
-            this.$emit('backtop');
+            this.$emit("backtop");
           });
 
           msg();
@@ -169,6 +175,19 @@ export default {
           msg();
           this.$Message.error("查询失败");
         });
+    },
+    keydown(evt) {
+      if (evt.code === "ArrowLeft") {
+        this.goBack();
+      } else if (evt.code === "ArrowRight") {
+        this.goNext();
+      }
+    },
+    goNext() {
+      this.$refs.page.next()
+    },
+    goBack() {
+      this.$refs.page.prev()
     }
   },
   components: {