Vue-smart-pagination

A data pagination component that splits any data into pages and has many settings.

All data is stored in an array and can have any values.

Demo

Demo page

Installation

Install NPM package.

$ npm install vue-smart-pagination --save

Register the component globally in your main.js file.

import { PaginationControl, PaginationPage } from 'vue-smart-pagination'
Vue.component('PaginationControl', PaginationControl)
Vue.component('PaginationPage', PaginationPage)

Or register the component locally in your vue file.

import { PaginationControl, PaginationPage } from 'vue-smart-pagination'
components: {
    PaginationPage,
    PaginationControl
},

Usage

Vue-smart-pagination contains two main components:

PaginationPage - has content of the pages.

PaginationControl - has content controls.

Both components are registered globally after installing package.

Also we have props - :settings="settings” which has two main objects - PaginationControlSettings и PaginationPageSettings, also we have property - pageToChange.

PaginationControlSettings contains settings related to buttons, arrows, dots and the start page.

PaginationPageSettings contains settings related to the page, the spinner and animation of the content change.

pageToChange contains actual page, update after change page value.

Array arrayData serves to output data to the page and is required to fill.

Example:

<template>
  <div id="app">
    <pagination-page :settings="settings">
      <div slot="page" slot-scope="item">
        <div>{{item.originalEvent.data}}</div>
      </div>
    </pagination-page>
    <pagination-control :settings="settings" />
  </div>
</template>

<script>
import { PaginationControl, PaginationPage } from 'vue-smart-pagination'

export default {
  name: 'App',
  components: {
    PaginationPage,
    PaginationControl
  },
  data: function () {
    return {
      arrayData: [
        {
          data: 'Page № 1'
        },
        {
          data: 'Page № 2'
        },
        {
          data: 'Page № 3'
        },
      ]
    }
  },
  computed: {
    settings: function () {
      return {
        arrayData: this.arrayData
      }
    }
  }
}
</script>

Adding Data to a Component:

In the array arrayData we add data and output them to the <pagination-page>. When referring to an array of elements, specify the originalEvent property to display the current data. To display simple data, use <div>, and for components use <component>.

<div slot =" page "slot-scope =" item "> </ div> is required.

Example:

import testComponent from 'testComponent'

export default {
  components: {
    testComponent
  }
}

arrayData: [
  {
    data: 'apple',
    component: 'testComponent'
  }
]

<pagination-page :settings="settings">
  <div slot="page" slot-scope="item">
    <div>{{item.originalEvent.data}}</div>
    <components :is="item.originalEvent.component"></components>
  </div>
</pagination-page>

To display the pagination buttons, insert the pagination-control component into the template.

Example:

<pagination-control :settings="settings" />

Props

Name | Type | All values | Default value | Description :---: | :---: | :---: |:---: | --- | PaginationControlSettings: | Buttons settings: | controlClass| String | - | - | Common class to the parent block with pagination buttons. controlStyle | String | square, circle, default | default | Style of pagination buttons. maxButtons | Number | - | 5 | The maximum number of pagination buttons on the page. allpageButtonsStyle | background | String | - | #ffffff | Background color of buttons borderColor | String | - | #02C8F3 | Border color of buttons color | String | - | #02C8F3 | Color of buttons backgroundHover | String | - | #02C8F3 | Background color of buttons when hovering borderColorHover | String | - | #02C8F3 | Border color of buttons when hovering colorHover | String | - | #ffffff | Color of buttons when hovering fontFamily | String | - | Avenir | Font family of buttons currentPageButtonStyle | backgroundActive | String | - | #02C8F3 | Background color of active button borderColorActive | String | - | #02C8F3 | Border color of active button colorActive | String | - | #ffffff| Color of active button Arrows settings:| hideArrows | Boolean | true, false | false | Show or hide the arrows of pagination. arrowSwitchHide | Boolean | true, false | false | Switches the mode of the arrows from disabled to full hiding. arrowStyle | String | styleArrow-1, styleArrow-2, styleArrow-3 | styleArrow-2 | Styles icons of arrow. arrowStyleColor | String | - | #02C8F3 | Color of arrow. arrowStyleColorHover | String | - | #ffffff | Color of arrow when hovering. Dots settings: | controlDotsStyle | String | styleDots-1, styleDots-2, styleDots-3 | styleDots-1 | Styles of dots. controlDotsColor | String | - | #02C8F3 | Color of dots. pageStarted: | Number | - | 1 | Number of start page. PaginationPageSettings: | Page settings: | pageClass | String | - | - | Common class for all pages. Spinner settings: | spinner | Boolean | true, false | false | Show or hide loading spinner. spinnerStyle | String | spinnerStyle-1, spinnerStyle-2, spinnerStyle-3 | spinnerStyle-3 | Styles for loading spinner. spinnerColor| String | - | #ffffff | Color of loading spinner. Animations settings: | animationPage | String | fade, slide, bounce, default | default | Animation when switching pages.

Methods

To call a custom method, when switching pages, in the <pagination-control /> component in the action callMethod, you must pass a user-defined function that is declared in the methods object.

Example:

<pagination-control @callMethod =" showText "/>

methods: {
  showText: function (e) {
    console.log (e)
  }
}

Browsers

Vue-smart-pagination has been successfully tested in browsers such as:

• Chrome (66.0)
• Safari (11.1)
• Opera (52.0)
• Firefox (59.0.2)
• Edge (16)

License

MIT

Copyright (c) 2018 Private Enterprise "WebFriends"