semantic-ui_与Laravel和Semantic-UI一起使用的VueJS 2.x分页

semantic-ui

Laravel Vue语义UI分页 (Laravel Vue Semantic-UI Pagination)

A Vue.js pagination component for Laravel paginators that works with Semantic-UI.

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

This is on GitHub so let me know if I've b0rked it somewhere, give me a star star if you like it beers

这是在GitHub上的，所以让我知道我是否在某个地方买过它，如果您喜欢它，请给我一颗星星

View demo 查看演示 Download Source 下载源

：white_check_mark：安装：ok_hand： (:white_check_mark: Install :ok_hand:)

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

：white_check_mark：用法：mortar_board： (:white_check_mark: Usage :mortar_board:)

Register the component globally:

全局注册组件：

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

Or use locally

或在本地使用

import pagination from 'laravel-vue-semantic-ui-pagination';

：white_check_mark：示例：four_leaf_clover： (:white_check_mark: Example :four_leaf_clover:)

<ul>
    <li v-for="post in laravelData.data" v-text="post.title"></li>
</ul>
<pagination :data="laravelData" v-bind:showDisabled="true" icon="chevron" v-on: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;
				});
		}
	}

});

：white_check_mark：：book：道具 (:white_check_mark: :book: 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 links) -1 will hide numeric pages and leave only arrow navigation. 3 will show 3 previous and 3 next numeric pages from current page.
showDisabled	Boolean	(optional) If set to true, will display left and right icons always.
icon	String	(optional) Default is angle double; Refer Semantic-UI Icons for specifying which icons you want.
size	String	(optional) Default is small; Refer Semantic-UI Menu Pagination for specifying the size of paginator.

名称	类型	描述
data	目的	包含Laravel分页器响应结构的对象。 请参阅下面的默认值。
limit	数	(可选)要呈现的页面数限制。 默认值0 (无限链接) -1将隐藏数字页面并仅保留箭头导航。 3将显示当前页面的前3个数字页面和后3个数字页面。
showDisabled	布尔型	(可选)如果设置为true，将始终显示左右图标。
icon	串	(可选)默认为angle double ； 请参阅Semantic-UI图标，以指定所需的图标。
size	串	(可选)默认值为small ； 请参阅Semantic-UI菜单分页以指定分页器的大小。

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

：white_check_mark：：ear：事件 (:white_check_mark: :ear: Events)

Name	Description
change-page	Triggered when a user changes page. Passes the new page index as a parameter.

名称	描述
change-page	当用户更改页面时触发。 将新page索引作为参数传递。

翻译自: https://vuejsexamples.com/a-vuejs-2-x-pagination-used-with-laravel-semantic-ui/

semantic-ui