refactor ts

src/components/Pagination/index.vue

@@ -1,21 +1,12 @@
-<template>
-  <div :class="{ 'hidden': hidden }" class="pagination-container">
-    <el-pagination
-      :background="background"
-      v-model:current-page="currentPage"
-      v-model:page-size="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :pager-count="pagerCount"
-      :total="total"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
-</template>
+<script lang="ts">
+export default {
+  name: 'Pagination'
+}
+</script>
 
-<script setup>
+<script setup lang="ts">
 import { scrollTo } from '@/utils/scroll-to'
+import { PropType } from "vue";
 
 const props = defineProps({
   total: {
@@ -31,7 +22,7 @@ const props = defineProps({
     default: 20
   },
   pageSizes: {
-    type: Array,
+    type: Array as PropType<number[]>,
     default() {
       return [10, 20, 30, 50]
     }
@@ -56,10 +47,14 @@ const props = defineProps({
   hidden: {
     type: Boolean,
     default: false
+  },
+  float: {
+    type: String,
+    default: 'right'
   }
 })
 
-const emit = defineEmits();
+const emit = defineEmits(['update:page', 'update:limit', 'pagination']);
 const currentPage = computed({
   get() {
     return props.page
@@ -76,7 +71,7 @@ const pageSize = computed({
     emit('update:limit', val)
   }
 })
-function handleSizeChange(val) {
+function handleSizeChange(val: number) {
   if (currentPage.value * val > props.total) {
     currentPage.value = 1
   }
@@ -85,21 +80,39 @@ function handleSizeChange(val) {
     scrollTo(0, 800)
   }
 }
-function handleCurrentChange(val) {
+function handleCurrentChange(val: number) {
   emit('pagination', { page: val, limit: pageSize.value })
   if (props.autoScroll) {
     scrollTo(0, 800)
   }
 }
-
 </script>
 
-<style scoped>
+<template>
+	<div :class="{ 'hidden': hidden }" class="pagination-container">
+		<el-pagination
+			:background="background"
+			v-model:current-page="currentPage"
+			v-model:page-size="pageSize"
+			:layout="layout"
+			:page-sizes="pageSizes"
+			:pager-count="pagerCount"
+			:total="total"
+			@size-change="handleSizeChange"
+			@current-change="handleCurrentChange"
+		/>
+	</div>
+</template>
+
+<style lang="scss" scoped>
 .pagination-container {
   background: #fff;
   padding: 32px 16px;
+  .el-pagination{
+    float: v-bind(float);
+  }
 }
 .pagination-container.hidden {
   display: none;
 }
-</style>
+</style>