vue-beauty-paginator

Vue.js分页组件.

vue-beauty-paginator是一个简单但功能强大的插件，它可以描绘出漂亮的分页标签。

.

安装

Vue.js 1.0.0+

npm

npm install vuejs-beauty-paginator --save

用法

作为组件引用

import vuePaginator from 'vuejs-beauty-paginator'

示例

在父组件example.vue中

<template>
  <pagination
    :per-page="perPages" // 分页标签中可见的页码数，其他以...代替, 必须是奇数
    :page-index="currentPage" // 当前页数
    :total="count" // 总页数
    :page-size="pageSize" // 每页显示数据的数量
    @change="pageChange"> // 当点击组件跳页时，子组件中通过调用change方法给父组件传递点击的页码，父组件通过调用pageChange方法来请求新数据
  </pagination>
</template>
<script>
import vuePaginator from 'vuejs-beauty-paginator'
export default {
  data () {
    return {
      // 分页标签中可见的页码数，其他以...代替, 必须是奇数
      perPages：4
      // 每页显示条数
      pageSize: 10,
      // 当前页码
      currentPage: 1,
      // 总记录数，需要请求此数据，并赋值
      count: 0
    }
  },
  methods: {
    ...mapActions([
      'getPagesInfo'
    ]),
    // 跳页时请求数据
    pageChange (page) {
      this.currentPage = page
      //后台请求该页数据
      this.getPagesInfo(this.currentPage)
    }
  }
}
</script>

prop

Name	Type	Default	Required	Description
perPages	Number	5	false	分页标签中可见的页码数，其他以...代替, 必须是奇数
pageIndex	Number	1	true	当前页码
pageSize	Number	1	true	每页显示条数
total	Number	1	true	总记录数

开发环境设置

# 安装依赖
npm install

# 生成源文件
npm run build

License

MIT