组件封装代码如下：
<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-paginationv-model:page="currentPage"v-model:page-size="pageSize":size="size":page-sizes="[10, 20, 30, 40]"show-quick-jumpershow-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.pagepageSize.value = val.limit
}
</script><template><n-space><div class="flex items-center justify-end mt-[50px]"><paginationv-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>
