From 251d2411f235e23209d57173857e05b637729ce8 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期日, 02 四月 2023 01:01:56 +0800
Subject: [PATCH] refactor ts
---
src/components/Pagination/index.vue | 59 ++++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 36 insertions(+), 23 deletions(-)
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 38de953..40bc584 100644
--- a/src/components/Pagination/index.vue
+++ b/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 @@
default: 20
},
pageSizes: {
- type: Array,
+ type: Array as PropType<number[]>,
default() {
return [10, 20, 30, 50]
}
@@ -56,10 +47,14 @@
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 @@
emit('update:limit', val)
}
})
-function handleSizeChange(val) {
+function handleSizeChange(val: number) {
if (currentPage.value * val > props.total) {
currentPage.value = 1
}
@@ -85,21 +80,39 @@
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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3