vue-simple-pagination

A simple Vue pagination component.

Preview

Installation

npm install @dragonish/vue-simple-pagination

Usage

Global registration

In the entry file:

import { createApp } from 'vue';
import SimplePagination from '@dragonish/vue-simple-pagination';
import App from './App.vue';

const app = createApp(App);
app.use(SimplePagination);
app.mount('#app');

Example usage:

<template>
  <simple-pagination v-model:current="page" :total="110" :size="25" @change="onPageChange"></simple-pagination>
  <div>
    <p>input value: {{ page }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const page = ref(1);

function onPageChange(p: number) {
  console.info('page:', p);
}
</script>

Direct import

Example usage:

<template>
  <simple-pagination v-model:current="page" :total="110" :size="25" @change="onPageChange"></simple-pagination>
  <div>
    <p>input value: {{ page }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SimplePagination } from '@dragonish/vue-simple-pagination';

const page = ref(1);

function onPageChange(p: number) {
  console.info('page:', p);
}
</script>

Props

name	type	description
current(v-model)	number	Current page number
total	number	Total number of items
size	number	Number of items per page
prevTitle	string | undefined	Previous page's hint
nextTitle	string | undefined	Next page's hint
theme	ThemeModeType | undefined	Theme mode

Emits

name	declaration	description
change	(page: number) => void	Page count change event

Types

type ThemeModeType = 'auto' | 'light' | 'dark';

License

MIT