适用于Laravel分页器的Vue.js分页组件，可与Bootstrap一起使用

Laravel Vue分页 (Laravel Vue Pagination)

A Vue.js pagination component for Laravel paginators that works with Bootstrap.

一个适用于Laravel分页器的Vue.js分页组件，可与Bootstrap一起使用。

要求 (Requirements)

Vue.js 2.x Laravel 5.x Bootstrap 3/4

Vue.js 2.x Laravel 5.x引导程序3/4

安装 (Install)

npm install laravel-vue-pagination
// or
yarn add laravel-vue-pagination

用法 (Usage)

Register the component:

注册组件：

Vue.component('pagination', require('laravel-vue-pagination'));

Use the component:

使用组件：

<ul>
    <li v-for="post in laravelData.data" v-text="post.title"></li>
</ul>

<pagination :data="laravelData" v-on:pagination-change-page="getResults"></pagination>

Vue.component('example-component', {

	data() {
		return {
			// Our data object that holds the Laravel paginator data
			laravelData: {},
		}
	},

	created() {
		// Fetch initial results
		this.getResults();
	},

	methods: {
		// Our method to GET results from a Laravel endpoint
		getResults(page) {
			if (typeof page === 'undefined') {
				page = 1;
			}

			// Using vue-resource as an example
			this.$http.get('example/results?page=' + page)
				.then(response => {
					return response.json();
				}).then(data => {
					this.laravelData = data;
				});
		}
	}

});

自定义上一个/下一个按钮 (Customizing Prev/Next Buttons)

Prev/Next buttons can be customized using the prev-nav and next-nav slots:

可以使用prev-nav和next-nav插槽自定义Prev / Next按钮：

<pagination :data="laravelData">
	<span slot="prev-nav">&lt; Previous</span>
	<span slot="next-nav">Next &gt;</span>
</pagination>

API (API)

道具 (Props)

Name	Type	Description
data	Object	An object containing the structure of a Laravel paginator response. See below for default value.
limit	Number	(optional) Limit of pages to be rendered. Default 0 (unlimited pages) -1 will hide numeric pages and leave only arrow navigation. Any positive integer (e.g. 2) will define how many pages should be shown on either side of the current page when only a range of pages are shown (see below for example output).

名称	类型	描述
data	目的	包含Laravel分页器响应结构的对象。 请参阅下面的默认值。
limit	数	(可选)要呈现的页面数限制。 默认值0 (无限制页面) -1将隐藏数字页面并仅保留箭头导航。 当只显示一定范围的页面时，任何正整数(例如2 )都将定义在当前页面的任一侧应显示多少页面(请参见下面的示例输出)。

Default data

默认data

{
	current_page: 1,
	data: [],
	from: 1,
	last_page: 1,
	next_page_url: null,
	per_page: 10,
	prev_page_url: null,
	to: 1,
	total: 0,
}

翻译自: https://vuejsexamples.com/a-vue-js-pagination-component-for-laravel-paginators-that-works-with-bootstrap/