Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/sinchang/vue-laypage

📃 A simple pagination component for Vue.js 2.x
https://github.com/sinchang/vue-laypage

component laypage pagination vue

Last synced: 3 months ago
JSON representation

📃 A simple pagination component for Vue.js 2.x

Lists

README

        

## vue-laypage

> A simple pagination component for Vue.js, Based on [layPage](http://laypage.layui.com/)

[![NPM version](https://img.shields.io/npm/v/vue-laypage.svg?style=flat)](https://npmjs.com/package/vue-laypage)
[![Vue 2.x](https://img.shields.io/badge/Vue-2.x-brightgreen.svg)](https://vuejs.org/v2/guide/)
[![NPM downloads](https://img.shields.io/npm/dm/vue-laypage.svg?style=flat)](https://npmjs.com/package/vue-laypage)

## Installation and Use

```
$ npm install vue-laypage --save
```

```
import Laypage from 'vue-laypage'
import 'vue-laypage/vue-laypage.css'

export default {
components: {
Laypage
}
}
```

or

```
import Vue from 'vue'
import Laypage from 'vue-laypage'
import 'vue-laypage/vue-laypage.css'

Vue.use(Laypage)
```
## Props
| Name | Type | Description |
| --- | --- | --- |
| pages | Number | 总页数,必填 |
| groups | Number | 一组显示几页,默认为5 |
| prev | String, Number, Boolean | 上一页按钮的文字,false 不显示 |
| next | String, Number, Boolean | 下一页按钮的文字,false 不显示 |
| first | String, Number, Boolean | 首页按钮的文字,false 不显示 |
| last | String, Number, Boolean | 尾页按钮的文字,false 不显示 |
| skin | String | 按钮高亮的颜色,默认#42b983 |
| skip | Boolean | 是否显示跳转 |
| jump | Function | 触发分页后的回调,返回当前页 |

## LICENSE

MIT