feat: 分页插件组件封装

src/renderer/views/rate/components/RateContentSection/index.vue

@@ -1,11 +1,28 @@
 <template>
     <div class="box-border border-[1px] border-[#E5E8EE] rounded-[16px] p-[20px]">
-        <Pagination :page="1" :pageSize="10" :total="30" :pageSizes="[10, 20, 30]" :siblingCount="siblingCount" :boundaryCount="boundaryCount" />
+        <Pagination v-model:current-page="queryParams.pageIndex" :page-size="queryParams.pageSize" :total="total" @update:pageSize="updatePageSize" @update:currentPage="updatePageIndex" />
     </div>
 </template>
 
 <script setup lang="ts" name="RateContentSection">
+import { ref } from 'vue'
 import Pagination from '@/components/Pagination/index.vue'
+
+const total = ref(200)
+const queryParams = ref({
+  pageIndex: 1,
+  pageSize: 10,
+})
+
+const updatePageSize = (val: string) => {
+  console.log("🚀 ~ updatePageSize ~ val:", val)
+  queryParams.value.pageSize = Number(val)
+}
+
+const updatePageIndex = (val: number) => {
+  console.log("🚀 ~ updatePageIndex ~ val:", val)
+  queryParams.value.pageIndex = val
+}
 </script>
 
 <style></style>