el-pagination v1.0.5

How to use

npm i el-pagination

Import on your page

import Pagination from 'el-pagination/Pagination'

Attributes

Events

Example

<template>
  <div>
      <Pagination
      :upName="upName"
      :downName="downName"
      :pageCount ="pageCount"
      :currentPage ="currentPage"
      :pageSize="pageSize"
      @click="click"
      @prev-click="prevClick"
      @next-click="nextClick">
      </Pagination>   
    </div>
  </div>
</template>
<script>
import Pagination from 'el-pagination/Pagination'
export default {
  name: 'About',
  data () {
    return {
      upName: '上一页',
      downName: '下一页',
      pageCount: 20,
      currentPage: 2,
      pageSize: 10
    }
  },
  components: {
    Pagination
  },
  methods: {
    click(page) {
      console.log(page)
    },
    prevClick(page) {
      console.log(page)
    },
    nextClick(page) {
      console.log(page)
    }
  }
}
</script>

if your currentPage is 2 and your pageCount is 20 pagesSize is 10, you will see this picture

this dots is quick skip many page, this skip number depending on your pageCount value, for example, If your pageCount is 20, the skip number is pageCount/2 = 2

if you currentPage is 8, you will see this picture

look the left dot, this is same as the right dot, the difference is skip left page