kvuse<template>
<k-page :total="total" v-model="currentPage" @current-change="changePage" />
</template>
<script setup>
import { ref } from 'vue';
const total = ref(50);
const currentPage = ref(1);
const changePage = (page) => {
console.log('page: ', page);
};
</script>
<template>
<k-page
:total="total" show-size v-model="currentPage"
@current-change="changePage" @size-change="sizeChange"
/>
</template>
<script setup>
import { ref } from 'vue';
const total = ref(50);
const currentPage = ref(1);
const changePage = (page) => {
console.log('page: ', page);
};
const sizeChange = (size) => {
console.log('当前size: ', size);
};
</script>
设置small, 可设置小型分页
<template>
<k-page
:total="total" small
v-model="currentPage" @current-change="changePage"
/>
</template>
<script setup>
import { ref } from 'vue';
const total = ref(50);
const currentPage = ref(1);
const changePage = (page) => {
console.log('page: ', page);
};
</script>
默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。 通过 pager-count 属性可以设置最大页码按钮数。
<template>
<k-page
:total="total" :pager-count="5"
v-model="currentPage" @current-change="changePage"
/>
</template>
<script setup>
import { ref } from 'vue';
const total = ref(500);
const currentPage = ref(1);
const changePage = (page) => {
console.log('page: ', page);
};
</script>