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">< Previous</span>
<span slot="next-nav">Next ></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,
}