Vue.js 引导分页不应用样式

Question

我目前正在我的Laravel 应用程序中处理Vue.js 组件，但我被困在pagination 上。我的分页逻辑就像一个魅力，但 Bootstrap 样式没有应用。这是我的Vue.js 组件：

<template>
...
   <div style="margin: auto; text-align: center;">
        <pagination v-if="pagination.total > pagination.per_page"
             :pagination="pagination" :callback="loadData"
             :options="paginationOptions">
        </pagination>
   </div>
...
</template>

<script>

import pagination from 'vue-bootstrap-pagination';
export default {
    components: {
        pagination
    },
pagination: {
        total: 0,
        per_page: 15,    // required
        current_page: 1, // required
        last_page: 0,    // required
        from: 1,
        to: 12
    },
    paginationOptions: {
        offset: 4,
        previousText: 'Previous',
        nextText: 'Next',
        alwaysShowPrevNext: true
    },
   ...

  </script>

正如我所说，我的分页就像一个魅力，但我没有风格。这是它目前的样子：

所需的输出将是这样的：

Answer 1

根据我们上面的对话，您使用的包似乎是为 Bootstrap 3 编写的，它的分页方案略有不同。

我已经更新了包 Vue 组件，为 Bootstrap 4 添加了适当的类。您现在可以直接使用这个组件，而不是加载过时的包。

https://gist.github.com/matticustard/9e11277b2e4f32e8bfffa9a08e38f338

分页.vue

<template>
    <nav>
        <ul class="pagination" v-if="pagination.last_page > 0" :class="sizeClass">
            <li class="page-item" v-if="showPrevious()" :class="{ 'disabled' : pagination.current_page <= 1 }">
                <a href="#" class="page-link" v-if="pagination.current_page > 1 " :aria-label="config.ariaPrevioius" @click.prevent="changePage(pagination.current_page - 1)">
                    <span aria-hidden="true">{{ config.previousText }}</span>
                </a>
            </li>

            <li class="page-item" v-for="num in array" :class="{ 'active' : num === pagination.current_page }">
                <a href="#" class="page-link" @click.prevent="changePage(num)">{{ num }}</a>
            </li>

            <li class="page-item" v-if="showNext()" :class="{ 'disabled' : pagination.current_page === pagination.last_page || pagination.last_page === 0 }">
                <a href="#" class="page-link" v-if="pagination.current_page < pagination.last_page" :aria-label="config.ariaNext" @click.prevent="changePage(pagination.current_page + 1)">
                    <span aria-hidden="true">{{ config.nextText }}</span>
                </a>
            </li>
        </ul>
    </nav>
</template>

<script>
export default {
  props: {
    pagination: {
      type: Object,
      required: true,
    },
    callback: {
      type: Function,
      required: true,
    },
    options: {
      type: Object,
    },
    size: {
      type: String,
    },
  },
  computed: {
    array() {
      if (this.pagination.last_page <= 0) {
        return [];
      }
      let from = this.pagination.current_page - this.config.offset;
      if (from < 1) {
        from = 1;
      }
      let to = from + (this.config.offset * 2);
      if (to >= this.pagination.last_page) {
        to = this.pagination.last_page;
      }
      const arr = [];
      while (from <= to) {
        arr.push(from);
        from += 1;
      }
      return arr;
    },
    config() {
      return Object.assign({
        offset: 3,
        ariaPrevious: 'Previous',
        ariaNext: 'Next',
        previousText: '«',
        nextText: '»',
        alwaysShowPrevNext: false,
      }, this.options);
    },
    sizeClass() {
      if (this.size === 'large') {
        return 'pagination-lg';
      } else if (this.size === 'small') {
        return 'pagination-sm';
      }
      return '';
    },
  },
  watch: {
    'pagination.per_page'(newVal, oldVal) { // eslint-disable-line
      if (+newVal !== +oldVal) {
        this.callback();
      }
    },
  },
  methods: {
    showPrevious() {
      return this.config.alwaysShowPrevNext || this.pagination.current_page > 1;
    },
    showNext() {
      return this.config.alwaysShowPrevNext ||
          this.pagination.current_page < this.pagination.last_page;
    },
    changePage(page) {
      if (this.pagination.current_page === page) {
        return;
      }
      this.$set(this.pagination, 'current_page', page);
      this.callback();
    },
  },
};
</script>