组件分页_分页组件使用范围插槽道具构建，具有最大的灵活性

最新推荐文章于 2025-09-11 04:48:57 发布

翻译最新推荐文章于 2025-09-11 04:48:57 发布 · 147 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://vuejsexamples.com/pagination-component-built-with-scoped-slot-props-for-maximum-flexibility/

标签

#vue #js #react #java #javascript

VuePaginatron是一款基于Vue.js的分页组件，利用作用域插槽提供高度定制化的分页功能。它允许开发者完全控制页面内容的呈现，并提供了丰富的API来处理页面切换和数据更新。

组件分页

Vue Paginatron (Vue paginatron)

Pagination component built with scoped-slot props for maximum flexibility.

分页组件使用范围插槽道具构建，以实现最大的灵活性。

如何安装 (How to Install)

npm install vue-paginatron --save

如何使用 (How to use)

vue-paginatron exposes several scoped-slot props that you can use to get basic pagination functionality, you have complete control over what is rendered.

vue-paginatron公开了几个可用于获得基本分页功能的作用域插槽道具，您可以完全控制呈现的内容。

import Paginatron from 'vue-paginatron'
expot default {
...
components: { Paginatron }
... 
};

道具 (Props)

items Array: items to be paginated
items Array ：要分页的项目
itemPerPage Number: number of items per page
itemPerPage Number ：每页的项目数
rotate Boolean: Wether or not to rotate at the end of the pages
rotation Boolean ：是否在页面末尾旋转

范围插槽道具 (Scoped slots props)

Methods:
方法：
- setPage : Sets an specific pagesetPage ：设置特定页面
- nextPage: Advance to the next pagenextPage ：进入下一页
- prevPage: Return to the previous pageprevPage ：返回上一页
Data:
数据：
- activeItems: Items shown in the current pageactiveItems ：当前页面中显示的项目
- page: Current active pagepage ：当前活动页面
  -
  - pages: Total of pagespages ：总页数
  -
  hasPrevPage: wether or not the current page is the first onehasPrevPage ：当前页面是否是第一个页面
- hasNextPage: wether or not the current page is the last onehasNextPage ：当前页面是否为最后一页
Attribute bindings:
属性绑定：
- prevButtonAttrs: hides/shows button if there is a previous pageprevButtonAttrs ：如果有上一页，则隐藏/显示按钮
- nextButtonAttrs: hides/shows button if there is a next pagenextButtonAttrs ：如果存在下一页，则隐藏/显示按钮
Event bindings:
事件绑定：
- prevButtonEvents: handles click event to go to the next pageprevButtonEvents ：处理单击事件以转到下一页
- nextButtonEvents: handles click event to go to the previous pagenextButtonEvents ：处理单击事件以转到上一页

大事记 (Events)

@changed

Called every time active items has changed
每次活动项目更改时调用
Payload: Array activeItems of the current page
有效负载：当前页面的Array activeItems

@next

Called when method nextPage is called
在调用nextPage方法时调用
Payload: Object { prev, current }: object with the previous and current page
有效负载： Object { prev, current } ：具有上一个页面和当前页面的对象

@previous

Called when method prevPage is called
在调用prevPage方法时调用
Payload: { prev, current }: object with the previous and current page
有效负载： { prev, current } ：具有上一页和当前页的对象

例 (Example)

<template>
  <div id="app">
    <h1>App</h1>
    <paginatron @change="updateItems" @next="advanced" @previous="decreased" :items-per-page="5" :items="items">
      <div slot-scope="{ setPage, nextPage, prevPage, page, pages, hasNextPage, hasPrevPage, nextButtonEvents, prevButtonEvents, nextButtonAttrs, prevButtonAttrs }">
        <button v-on="prevButtonEvents" v-bind="prevButtonAttrs" >Prev</button>
        {{ activeItems }}
        <button v-on="nextButtonEvents" >Next</button>
        <div v-for="(page, index) in pages" :key="index">
          <p @click="setPage(index)">{{ page }}</p>
        </div>
      </div>
    </paginatron>
  </div>
</template>
<script>
import Paginatron from 'vue-paginatron';

export default {
  name: 'app',
  components: { Paginatron },
  data() {
    return {
      activeItems: [],
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
  methods: {
    updateItems(activeItems) {
      this.activeItems = activeItems;
    },
    decreased({ prev, current }) {
      console.log(prev, current);
    },
    advanced({ activeItems, prev, current }) {
      console.log(prev, current);
    },
  },
};
</script>

<style>

</style>

翻译自: https://vuejsexamples.com/pagination-component-built-with-scoped-slot-props-for-maximum-flexibility/

组件分页