proginn-frontend/kaifain_v2/components/Pagination.vue

<template lang="pug">
  .pagenav
    b-pagination(
      v-if="total > 0"
      v-model="page"
      :total="total"
      :per-page="perPage"
      :range-before="isMobile ? 1 : 3"
      :range-after="isMobile ? 2 : 5"
      order="is-centered"
      aria-next-label="下一页"
      aria-previous-label="上一页"
      aria-page-label="页"
      aria-current-label="当前页"
      )
      b-pagination-button(
        slot-scope="props"
        :page="props.page"
        :id="`page${props.page.number}`"
        tag="router-link"
        :to="mergePagelink(props.page.number)"
        ) {{props.page.number}}
      b-pagination-button(
        slot="previous"
        slot-scope="props"
        :page="props.page"
        tag="router-link"
        :to="props.page.number ? mergePagelink(props.page.number) : '#'"
        )
        i.progico.progico-arrow.left
      b-pagination-button(
        slot="next"
        slot-scope="props"
        :page="props.page"
        tag="router-link"
        :to="props.page.number <= totalPage ? mergePagelink(props.page.number) : '#'"
        )
        i.progico.progico-arrow

    .hint-msg(v-else) 无相关解决方案

</template>

<script lang="ts">
import Vue from 'vue'
import qs from 'qs'

export default Vue.extend({
  name: 'Pagination',
  components: {
  },

  props: {
    page: {
      type: Number,
      default: 1
    },
    querystring: {
      type: String,
      default: ''
    },
    list: Array,
    total: {
      type: Number,
      default: 0
    },
    perPage: {
      type: Number,
      default: 10
    },
    path: {
      type: String
    },
    mode: {
      type: String,
      default: 'params'
    }
  },

  data() {
    return {
      // @ts-ignore
      isMobile: this.$deviceType.isMobile()
    }
  },

  computed: {
    totalPage(): number {
      return Math.ceil(this.total / this.perPage)
    }
  },

  methods: {
    mergePagelink(page) {
      let path = this.path || this.$route.path
      const query = Object.assign({}, this.$route.query)

      if (this.mode === 'params') {
        path += page
      }
      else {
        query.page = page
      }

      return `${path}${Object.keys(query).length ? '?' + qs.stringify(query) : ''}`

    }
  }
})
</script>

<style lang="scss">
.kaifain-view {
  .pagenav {
    .hint-msg {
      text-align: center;
      font-size: 0.875rem;
      color: #999;
      padding: 2rem;
    }
  }

  .pagination {
    max-width: 720px;
    margin: 0 auto;
    justify-content: center;
    padding: 3rem 0;

    .pagination-previous {
      flex-grow: unset;
      order: 1;
    }

    .pagination-list {
      flex-grow: unset;
      order: 2;
    }

    .pagination-next {
      flex-grow: unset;
      order: 3;
    }

    .progico-arrow {
      font-size: 0.75em;

      &.left {
        transform: rotate(180deg);
      }
    }
  }
}
</style>