vue.js - 如何在 vue-pagination-2 上隐藏页码？

Question

我有这个代码:

   <div id="registros-dataset" class="tab-pane fade in active">
        <div v-if="dataset.collectedData && dataset.collectedData.length > 0 && !isLoading">
            <maare-dataset-result-panel :dataset="dataset"></maare-dataset-result-panel>
        </div>
        <h4 v-else-if="isLoading">carregando...</h4>
        <pagination for="dataset-result-panel" 
            :records="Number(dataset.count)" 
            :per-page="resultsPerPage" 
            :limit=0
            count-text="Exibindo de {from} a {to}, total de {count}"
            class="center"
            ref="p">
        </pagination>
    </div>

但是 vue-pagination 向我展示了这样的内容:

<< < 1 2 3 ... > >>

如何隐藏页码，并仅显示“下一页”和“后退”按钮？

Answer 1

vue-pagination-2 上不存在这样的选项(隐藏页码) .

看看page numbers source code ，你最好的选择实际上是 CSS，因为有一个模式:

• 页码始终使用 VuePagination__pagination-item
• 箭头也使用VuePagination__pagination-item ，还可以另外使用:
  • .VuePagination__pagination-item-prev-page
  • .VuePagination__pagination-item-prev-chunk
  • .VuePagination__pagination-item-next-page
  • .VuePagination__pagination-item-next-chunk

就 CSS 而言，您有相当多的可能选择器(例如 li.VuePagination__pagination-item:nth-child(n+3):nth-last-child(n+3) { )，但我相信最安全的选择是:

li.VuePagination__pagination-item:not(.VuePagination__pagination-item-prev-page):not(.VuePagination__pagination-item-prev-chunk):not(.VuePagination__pagination-item-next-page):not(.VuePagination__pagination-item-next-chunk) {
  display: none;
}

演示:

new Vue({
  el: "#app",
  components: {
    Pagination
  },
  data: {
    page: 1
  },
  methods: {
    setPage: function(page) {
      this.page = page;
    }
  }
});

#app {
  text-align: center;
}

li.VuePagination__pagination-item:not(.VuePagination__pagination-item-prev-page):not(.VuePagination__pagination-item-prev-chunk):not(.VuePagination__pagination-item-next-page):not(.VuePagination__pagination-item-next-chunk) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/matfish2/vue-pagination-2/master/dist/vue-pagination-2.min.js"></script>
    
<div id="app">
  <h2>Vue Pagination 2</h2>
  <p>Selected page: {{page}}</p>
  <pagination :records="10000" :per-page="100" @paginate="setPage">
  </pagination>
</div>