分页组件代码优化

components/common/page/pageComponent.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="page-wrap" v-if="total/1.0/pageSize>1">
     <el-pagination
+      :current-page.sync="currentPage"
       :page-size="pageSize"
       layout="prev, pager, next"
       :total="total"
@@ -9,7 +10,7 @@
     </el-pagination>
     <ul class="pagination" style="float:right;margin-left:20px;">
       <li>
-        <input type="text" class="page-number" v-model="nowPage">
+        <input type="number" class="page-number" @keyup.13="changePage" v-model="nowPage">
       </li>
       <li>
         <a class="page-a" @click="changePage">GO</a>
@@ -22,20 +23,30 @@
   export default {
     data () {
       return {
-        nowPage: 1
+        nowPage: 1,
+        currentPage: 1
       }
     },
     watch: {
       current: function () {
-        this.nowPage = this.current
+        this.nowPage = Number(this.current)
+        this.currentPage = this.nowPage
       }
     },
     props: ['current', 'total', 'pageSize'],
     methods: {
       handleCurrentChange: function (changedPage) {
-        this.$emit('childEvent', changedPage)
+        if (this.nowPage !== this.currentPage) {
+          this.$emit('childEvent', changedPage)
+        }
       },
       changePage: function () {
+        let totalPage = Math.ceil(this.total / this.pageSize)
+        if (this.nowPage > totalPage) {
+          this.nowPage = totalPage
+        } else if (this.nowPage < 1) {
+          this.nowPage = 1
+        }
         this.$emit('childEvent', this.nowPage)
       }
     }
@@ -149,4 +160,12 @@
     display: inline-block;
     margin: 0;
   }
+  input.page-number {
+    -moz-appearance:textfield;
+  }
+  input.page-number::-webkit-inner-spin-button,
+  input.page-number::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 </style>