src/components/rk-page.vue

/** * Licensed to the Apache Software Foundation (ASF) under one or more *
contributor license agreements. See the NOTICE file distributed with * this work
for additional information regarding copyright ownership. * The ASF licenses
this file to You under the Apache License, Version 2.0 * (the "License"); you
may not use this file except in compliance with * the License. You may obtain a
copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless
required by applicable law or agreed to in writing, software * distributed under
the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR
CONDITIONS OF ANY KIND, either express or implied. * See the License for the
specific language governing permissions and * limitations under the License. */

<template>
  <span class="rk-page flex-h">
    <svg class="icon cp mr-5" @click="pre">
      <use xlink:href="#chevron-left"></use>
    </svg>
    <input
      class="rk-page-input tc mr-5"
      type="text"
      v-model="currentPage"
      @keyup.enter="goToCertainPage"
    />
    <span class="mr-5">/</span>
    <span class="mr-5">{{ Math.ceil(this.total / this.currentSize) }}</span>
    <svg class="icon cp" @click="next">
      <use xlink:href="#chevron-right"></use>
    </svg>
  </span>
</template>
<script lang="js">
        // tslint:disable
  export default {
    name: 'RkPage',
    props: {
      name: {
        type: String,
        default: '',
      },
      currentPage: {
        type: Number,
        default: 1,
      },
      currentSize: {
        type: Number,
        default: 10,
      },
      total: {
        type: Number,
        default: 10,
      },
    },
    computed: {
      last() {
        if (this.currentPage * this.currentSize > this.total) {
          return this.total;
        }
        return this.currentPage * this.currentSize;
      },
      totalPages() {
        return Math.ceil(this.total / this.currentSize)
      }
    },
    data() {
      return {
        current: '',
      };
    },
    watch: {
      currentPage() { this.current = parseInt(this.currentPage); },
    },
    beforeMount() {
      this.current = this.currentPage;
    },
    methods: {
      next() {
        if (this.current !== this.totalPages) {
          this.current = this.current + 1;
          this.$emit('changePage', this.current);
        }
      },
      pre() {
        if (this.current !== 1) {
          this.current = this.current - 1;
          this.$emit('changePage', this.current);
        }
      },
      goToCertainPage() {
        var regInt = /^0*[1-9]\d*$/
        if (regInt.test(this.current) && this.current <= this.totalPages) {
          this.$emit('changePage', this.current);
        }
      }
    },
  };
</script>
<style lang="scss" scoped>
  .rk-page {
    display: inline-flex;
    .icon {
      padding: 3px;
      opacity: 0.5;
      &:hover {
        opacity: 1;
        color: #448dfe;
      }
    }
  }
  .rk-page-input {
    width: 40px;
    outline: 0;
    border-style: unset;
    border-radius: 4px;
    border: 1px solid #c1c5ca55;
  }
</style>