default-pagination-vue v0.2.2

default-pagination-vue

Installation

Install the package

$ npm install default-pagination-vue

Register the component globally in the main.js

import DefaultPagination from 'default-pagination-vue';

const app = createApp(App);
app.component('default-pagination', DefaultPagination);

or inside a component

import DefaultPagination from 'default-pagination-vue';
export default {
  components: {
    DefaultPagination
  }
};

Simple example

<default-pagination
  v-model="current"
  :total-pages="20"
  :max-squares="10"
  no-first-last-icon
  not-inherit-font
  @page-click="handleClick"
/>

    handleClick({ newPage, totalPages, blurState, cancelChange, done }){}

Props (every Boolean prop is false by default)

'page-click' event

Example

    handleClick({ newPage, totalPages, blurState, cancelChange, done }) {
      console.log(newPage, totalPages, blurState, cancelChange, done);
      blurState();
      setTimeout(() => cancelChange(), 500);
    }

    handleClick({ blurState, cancelChange, done }) {
      blurState();
      yourRequest().then(()=>{
        //your code here
        done();
      })
      .catch(err => {
        cancelChange();
        alert(err);
      });
    }

Slots (replace content)

Example

<default-pagination v-model="current" :total-pages="10">
  <template #first> First one page </template>
  <template #last> Last one page <my-component /> </template>
  <template #previous> <my-own-icon /> </template>
</default-pagination>