chore(vuepress-plugin-pagation): try refactoring using the render func

.eslintrc.js

@@ -198,7 +198,7 @@ module.exports = {
     'prefer-const': 2,
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
+      objectsInObjects: true
     }],
     'array-bracket-spacing': [2, 'never']
   }

packages/@vuepress-reco/vuepress-plugin-pagation/bin/Pagation.js

@@ -0,0 +1,162 @@
+import pagationLocales from './locales'
+import './pagation.styl'
+
+export default {
+  render (h) {
+    return h('div', {
+      class: { pagation: true },
+      style: { display: this.show ? 'block' : 'none' }
+    }, [
+      h('div', {
+        class: { 'pagation-list': true }
+      }, [
+        h('span', {
+          class: { jump: true },
+          style: { display: this.currentPage > 1 ? 'inline' : 'none' },
+          on: { click: this.goPrev },
+          attrs: { unselectable: 'on' },
+          domProps: { innerHTML: this.pagationLocales.prev }
+        }),
+        h('span', {
+          class: { efont: true },
+          style: { display: this.efont ? 'inline-block' : 'none' },
+          on: { click: this.jumpPage.bind(this, 1) },
+          domProps: { innerHTML: 1 }
+        }),
+        h('span', {
+          class: { efont: true },
+          style: { display: this.efont ? 'inline-block' : 'none' },
+          domProps: { innerHTML: '...' }
+        }),
+        ...this.indexs.map(num => {
+          return h('span', {
+            class: {
+              jump: true,
+              bgprimary: this.currentPage == num
+            },
+            on: { click: this.jumpPage.bind(this, num) },
+            attrs: { key: num },
+            domProps: { innerHTML: num }
+          })
+        }),
+        h('span', {
+          class: { ellipsis: true },
+          style: { display: this.efont && this.currentPage < this.pages - 4 ? 'inline-block' : 'none' },
+          domProps: { innerHTML: '...' }
+        }),
+        h('span', {
+          class: { jump: true },
+          style: { display: this.efont && this.currentPage < this.pages - 4 ? 'inline-block' : 'none' },
+          domProps: { innerHTML: this.pages }
+        }),
+        h('span', {
+          class: { jump: true },
+          style: { display: this.currentPage < this.pages ? 'inline' : 'none' },
+          domProps: { innerHTML: this.pagationLocales.next },
+          on: { click: this.goNext }
+        }),
+        h('span', {
+          class: { jumppoint: true },
+          domProps: { innerHTML: this.pagationLocales.jump }
+        }),
+        h('span', {
+          class: { jumpinp: true }
+        }, [h('input', {
+          attrs: { type: 'text' },
+          domProps: { value: this.value },
+          on: { input (event) { this.$emit(event.target.value) } }
+        })]),
+        h('span', {
+          class: { jump: true, gobtn: true },
+          on: { click: this.jumpPage.bind(this, this.changePage) },
+          domProps: { innerHTML: this.pagationLocales.go }
+        })
+      ])
+    ])
+  },
+  data () {
+    return {
+      changePage: '' // 跳转页
+    }
+  },
+  props: {
+    total: {
+      type: Number,
+      default: 10
+    },
+    perPage: {
+      type: Number,
+      default: 2
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    pages () {
+      return Math.ceil(this.total / this.perPage)
+    },
+    show: function () {
+      return this.pages && this.pages != 1
+    },
+    efont: function () {
+      if (this.pages <= 7) return false
+      return this.currentPage > 5
+    },
+    indexs: function () {
+      var left = 1
+      var right = this.pages
+      var ar = []
+      if (this.pages >= 7) {
+        if (this.currentPage > 5 && this.currentPage < this.pages - 4) {
+          left = Number(this.currentPage) - 3
+          right = Number(this.currentPage) + 3
+        } else {
+          if (this.currentPage <= 5) {
+            left = 1
+            right = 7
+          } else {
+            right = this.pages
+
+            left = this.pages - 6
+          }
+        }
+      }
+      while (left <= right) {
+        ar.push(left)
+        left++
+      }
+      return ar
+    },
+    pagationLocales () {
+      return pagationLocales(this)
+    }
+  },
+  methods: {
+    goPrev () {
+      let currentPage = this.currentPage
+      if (this.currentPage > 1) {
+        this.emit(--currentPage)
+      }
+    },
+    goNext () {
+      let currentPage = this.currentPage
+      if (currentPage < this.pages) {
+        this.emit(++currentPage)
+      }
+    },
+    jumpPage: function (id) {
+      const numId = parseInt(id)
+
+      if (numId <= this.pages && numId > 0) {
+        this.emit(numId)
+        return
+      }
+      alert(`请输入大于0，并且小于${this.pages}的页码！`)
+    },
+    emit (id) {
+      this.$emit('getCurrentPage', id)
+    }
+  }
+}

packages/@vuepress-reco/vuepress-plugin-pagation/bin/pagation.styl

@@ -0,0 +1,50 @@
+.pagation
+  font-weight: 700;
+  text-align: center;
+  color: #888;
+  color: var(--text-color)
+  margin: 20px auto 0;
+  background: #f2f2f2;
+  background: var(--background-color);
+  .pagation-list
+    font-size: 0;
+    line-height: 50px;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    span
+      font-size: 14px;
+      &.jump, &.jumpinp input
+        box-shadow: var(--box-shadow)
+        border 1px solid var(--border-color)!important
+        border: 1px solid #ccc;
+      &.jump
+        padding: 5px 8px;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-left: 5px;
+      &.jumpinp
+        input
+          width: 55px;
+          height: 26px;
+          background-color: var(--background-color)
+          font-size: 13px;
+          -webkit-border-radius: 4px;
+          -moz-border-radius: 4px;
+          border-radius: 4px;
+          text-align: center;
+          outline none
+      &.bgprimary
+        cursor: default;
+        color: #fff;
+        background: $accentColor;
+        border-color: $accentColor;
+      &.ellipsis
+        padding: 0px 8px;
+      &.jumppoint
+        margin: 0 10px 0 30px;