vue-pager

A vue pagination component 一个vue分页组件

Usage 组件使用

Basic Usage 基本用法

在一个组件中使用pager组件：

<pager :items="languages" :a="5"  :c="2"></pager>

Params meaning 参数说明

items: Contents for displaying, type of Array. 要分页显示的内容。必须，数组类型。

a: Max number of items displayed in each page, optional, default 4. 每页最多显示多少个item。非必需，默认值为4。

c: Default current page number, optional, default 1. 默认显示第几页。非必需，默认值为1。

Demo 完整使用例子

App.vue

<template>
  <div id="app">
    <pager :items="languages" :c="2"></pager>
  </div>
</template>

<script>
import pager from './pager.vue'

export default {
  data () {
    return {
      languages: ['PHP', 'JavaScript', 'HTML', 'CSS', 'Ruby', 'Python', 'Matlab', 'Julia', 'R', 'Scheme', 'Scala', 'Java', 'C++', 'SQL', 'Shell', 'Lua', 'Erlang', 'Lisp', 'Haskell', 'Closure', 'Groovy', 'OCaml', 'Dart', 'Go']
    }
  },
  components: {
    pager
  }
}
</script>

Implementation & Hack 组件实现与自行修改

使用props传值;

使用offset+index访问数组中不从0开始的元素;

具体实现见pager.vue。

item展示形式为item自身，需要显示链接的可以考虑传入对象数组；

提供了三种页面底部的页码的显示格式；

请自行hack