# vue2-pagination

> vue pagination component

Latest version **1.0.0** (published 2016-09-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue2-pagination
pnpm add vue2-pagination
yarn add vue2-pagination
bun add vue2-pagination
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-09-26 |
| First published | 2016-09-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Luo Ye |
| Maintainers | goumang2010 |
| Keywords | vue, pagination |

## Links

- npm: https://www.npmjs.com/package/vue2-pagination
- Repository: https://github.com/luoye-fe/vue-pagination
- Homepage: https://github.com/luoye-fe/vue-pagination#readme
- Issues: https://github.com/luoye-fe/vue-pagination/issues
- npm.io page: https://npm.io/package/vue2-pagination

## Recent versions

- 1.0.0 (latest) — 2016-09-26

## README

vue-pagination
-------------------

[中文文档](./doc/CHINESE.md)

Pagination component for [Vue.js](vuejs.org).  

**Compatibility Note** : vue-pagination requires Vue.js 1.0.0+  


### Installation

* Script Tag

    ```html
    <script type="text/javascript" src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
    <script type="text/javascript" src="./dist/vue-pagination.min.js"></script>
    ```

* NPM

    I don't publish this repo on npm, you can install by github.  

    ```bash
    npm install https://github.com/luoye-fe/vue-pagination.git
    ```

### Usage

* template

    ```html
    <v-pagination :pagination-config.sync="config"></v-pagination>
    ```

* js

    ```js
    export default {
        data() {
            return {
                config: {
                    currentPage: 1,
                    itemsPerPage: 10,
                    pagesLength: 5,
                    totalItems: 0,
                    onChange() {}
                }
            };
        },
        ready() {
            this.config.onChange = () => {
                console.log(this.config.currentPage);
            };
        }
    };
    ```

### Demo

[Demo](http://luoye.pw/html/vue-pagination/)

### Options

* use options

    While useing Commonjs/ES6 Module, you should exec `Vue.use(VuePagination)`, at this point you can pass options by `Vue.use(VuePagination, optionsObj)`.

    | Name          | Type     | Default        | Required | Description
    | :------------ | :--------| :------------- | :--------| :-----------
    | tagName       | String   | vue-pagination |          | custom tag name

    **example**

    ```js
    import Vue from 'vue';
    import VuePagination from 'vue-pagination';
    Vue.use(VuePagination, {
        tagName: 'vue-pagintaion'
    })
    ```

* pagination config
    
    vue-pagination accept props named `pagination-config.sync`, you must pass some required options, all options as follows.

    | Name          | Type     | Default | Required | Description
    | :------------ | :--------| :-------| :--------| :-----------
    | firstStr      | String   | First   | false    | First button text
    | prevStr       | String   | Prev    | false    | Prev button text
    | nextStr       | String   | Next    | false    | Next button text
    | lastStr       | String   | Last    | false    | Last button text
    | first         | Boolean  | True    | false    | Need first button or not
    | prev          | Boolean  | True    | false    | Need prev button or not
    | next          | Boolean  | True    | false    | Need next button or not
    | last          | Boolean  | True    | false    | Need last button or not
    | normal        | Boolean  | True    | false    | Need normal page list or not
    | currentPage   | Number   | 1       | false    | CurrentPage
    | itemsPerPage  | Number   | 10      | false    | Item number every page
    | pagesLength   | Number   | 5       | false    | Normal page list length
    | totalItems    | Number   | 0       | true     | Total items number (calculate numbers of page by this)
    | onChange      | Function |         | false    | Callback function when currentPage change

---
_Source: https://npm.io/package/vue2-pagination · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._