# pagination-vplugin

> 分页控件

Latest version **1.0.1** (published 2018-11-01) · MIT license · 0 weekly downloads

## Install

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

## 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.1 |
| Published | 2018-11-01 |
| First published | 2018-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 33.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | kangyuin |
| Maintainers | kangyulin |
| Keywords | vue, page, pager, pagination, plugin |

## Links

- npm: https://www.npmjs.com/package/pagination-vplugin
- Repository: https://github.com/kangyulin/vplugin-pagination
- Issues: https://github.com/kangyulin/vplugin-pagination/issues
- npm.io page: https://npm.io/package/pagination-vplugin

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [element-ui](https://npm.io/package/element-ui.md) ^2.4.9

## Recent versions

- 1.0.1 (latest) — 2018-11-01
- 1.0.0 — 2018-11-01

## README

# 分页控件

### 安装插件
``` bash
npm i pagination-vplugin
```

### 依赖
基于element-ui进行的二次封装,所以外部需要在main.js中引入element-ui
``` vue
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)
```

### 代码示例-main.js
``` vue
import Vue from 'vue'
import App from './App'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Pagination from 'pagination-vplugin'

Vue.use(Element)
Vue.use(Pagination)
```

### 代码示例-app.vue
``` vue
<template>
  <div id="app">
    <pagination 
      :total="form.total"
      :page-index="form.pageIndex"
      :page-size="form.pageSize"
      :page-index-change="pageIndexChange" 
      :page-size-change="pageSizeChange"></pagination>
    <div>index:{{form.pageIndex}}</div>
    <div>size:{{form.pageSize}}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      form:{
        total: 1000,
        pageIndex: 2,
        pageSize: 20,
      }
    }
  },
  methods:{
    pageIndexChange:function(index){
      this.form.pageIndex = index
      console.log("pageIndexChange:",index,this.form);
    },
    pageSizeChange:function(size){
      this.form.pageSize = size
      console.log("pageSizeChange",size,this.form);
    }
  }
}
</script>
```

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