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向我展示了这样：

＆LT;＆LT; ＆LT; 1 2 3 ...＆gt; ＆GT;＆GT;

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

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>

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

1 个答案: