Naive UI 分页组件二次封装

组件封装代码如下：

 
<script setup lang="ts">
import { computed } from "vue";
const props = defineProps({
    size: {
        type: String,
        default() {
            return "medium";
        },
    },
    total: {
        type: Number,
        required: true,
    },
    page: {
        // 当前页码
        type: Number,
        default: 1,
    },
    limit: {
        type: Number,
        default: 10,
    },
});
const emit = defineEmits();
const currentPage = computed({
    set(val) {
        emit("update:page", val);
    },
    get() {
        return props.page;
    },
});
const pageSize = computed({
    set(val) {
        emit("update:limt", val);
    },
    get() {
        return props.limit;
    },
});
let handleCurrentChange = (page: any) => {
    emit("pagination", {
        page: page,
        limit: pageSize.value,
    });
};
let handleSizeChange = (page: any) => {
    emit("pagination", {
        currentPage: currentPage.value,
        limit: page,
    });
};
</script>

<template>
    <div>
        <n-pagination
            v-model:page="currentPage"
            v-model:page-size="pageSize"
            :size="size"
            :page-sizes="[10, 20, 30, 40]"
            show-quick-jumper
            show-size-picker
            @update:page="handleCurrentChange"
            @update:page-size="handleSizeChange"
            :item-count="total"
        >
			<template #prefix>
				共{{ total }}条数据
			</template>
			<template #goto>到</template>
        	<template #suffix>
                <span class="goto-label">页</span>
                <n-button size="small" type="primary" @click="handleCurrentChange(currentPage)">确定</n-button>
            </template>
        </n-pagination>
    </div>
</template>

<style scoped></style>

使用代码如下：

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'

const page = ref(4)
const pageSize = ref(10)
const totalCount = ref(999)

const pageChange = (val) => {
    page.value = val.page
    pageSize.value = val.limit
}
</script>

<template>
    <n-space>
    <div class="flex items-center justify-end mt-[50px]">
              <pagination
                v-model:page="page"
                v-model:limit="pageSize"
                v-show="totalCount > 0"
                :total="totalCount"
                @pagination="pageChange"
              ></pagination>
      </div>
        <!-- <pagination :page="page" @changePage="pageFn" :totalCount="totalCount"></pagination> -->
    </n-space>
</template>

<style scoped lang="scss"></style>