@dragonish/vue-simple-pagination v0.2.4

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

Emits

Types

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

License

MIT