vue 滑动分页_滑动分页Vue组件

vue 滑动分页

Vue的滑动分页 (Sliding Pagination for Vue)

ARIA-friendly pagination component with a sliding window.

带有滑动窗口的ARIA友好分页组件。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

节点 (Node)

npm install vue-sliding-pagination --save

npm install vue-sliding-pagination --save

or, for the fäncÿ people,

或者，对于法恩族人，

yarn add vue-sliding-pagination

yarn add vue-sliding-pagination

浏览器 (Browser)

Currently, no browser build is available.

当前，没有可用的浏览器版本。

用法 (Usage)

Basic usage of the pagination component only requires the current page, the total number of pages and a handler which is called on page change.

分页组件的基本用法仅需要当前页面，页面总数和在页面更改时调用的处理程序。

The pagination component does not handle page changes by itself, instead you are required to provide a page change handler which should contain all your page changing logic (e.g. a vuex store dispatch) and eventually change the current page to the passed one. In later releases, a v-model approach to currentPage may be offered, but was opted against for the time being.

分页组件不能单独处理页面更改 ，而是需要提供一个页面更改处理程序，该处理程序应包含所有页面更改逻辑(例如，vuex存储分派)，并最终将当前页面更改为传递的页面。 在以后的版本中，可能会提供对currentPage的v模型方法，但暂时不采用。

Thus, to get a paginator with default settings (please consult the options listing below for details), the following markup and script sections provide a starting point:

因此，要使分页器具有默认设置(请参考下面的选项以获得详细信息)，以下标记和脚本部分提供了一个起点：

<sliding-pagination
  :current="currentPage"
  :total="totalPages"
  @page-change="pageChangeHandler"
></sliding-pagination>

import SlidingPagination from 'vue-sliding-pagination'

// in component or vue instance
components: {
  // ...
  SlidingPagination
},
data() {
  return {
    // ...
    currentPage: 1,
    totalPages: 10
  }
},
methods: {
  // ...
  pageChangeHandler(selectedPage) {
    this.currentPage = selectedPage
  }
}

翻译自: https://vuejsexamples.com/a-sliding-pagination-vue-component/

vue 滑动分页