From f7a99184725f7ea0884cf478f169aad4e5b6583c Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Sun, 13 Jul 2025 18:27:57 +0800
Subject: [PATCH] 1
---
src/components/nPagination.vue | 172 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 108 insertions(+), 64 deletions(-)
diff --git a/src/components/nPagination.vue b/src/components/nPagination.vue
index bcb79e9..be523eb 100644
--- a/src/components/nPagination.vue
+++ b/src/components/nPagination.vue
@@ -1,55 +1,98 @@
<template>
- <div class="n_pagination flex-center">
- <div class="n_pagination_item flex-center prohibited">
- <span>{{ $t('Previous') }}</span>
- </div>
- <div class="n_page_number flex-center">
- <span>1</span>
- <span>/</span>
- <span>300</span>
- </div>
- <div class="n_pagination_item flex-center">
- <span>{{ $t('Next') }}</span>
- </div>
+ <div class="n_pagination flex-center">
+ <div
+ class="n_pagination_item flex-center"
+ @click="prev"
+ :class="pageNo <= 1 ? 'prohibited' : ''"
+ >
+ <span>{{ $t("Previous") }}</span>
</div>
+ <div class="n_page_number flex-center">
+ <span>{{ pageNo }}</span>
+ <span>/</span>
+ <span>{{ totalPage }}</span>
+ </div>
+ <div
+ class="n_pagination_item flex-center"
+ @click="next"
+ :class="pageNo >= totalPage ? 'prohibited' : ''"
+ >
+ <span>{{ $t("Next") }}</span>
+ </div>
+ </div>
</template>
<script>
export default {
- name: 'nPagination',
- props: {
- total: {
- type: Number,
- default: 0
- },
- pageSize: {
- type: Number,
- default: 10
- },
- currentPage: {
- type: Number,
- default: 1
- }
+ name: "nPagination",
+ props: {
+ total: {
+ type: Number,
+ default: 1
},
- data() {
- return {
- pageList: [],
- totalPage: 0,
- currentPage: 1
- }
+ pageSize: {
+ type: Number,
+ default: 10
},
- watch: {
- total() {
- this.init()
- },
- pageSize() {
- this.init()
- },
- currentPage() {
-
- }
+ pageNo: {
+ type: Number,
+ default: 1
+ },
+ // 是否跳转到页面顶部
+ toTop: {
+ type: Boolean,
+ default: true
}
-}
+ },
+ data() {
+ return {
+ pageList: []
+ // totalPage: 0
+ };
+ },
+ watch: {
+ total() {
+ this.init();
+ },
+ pageSize() {
+ this.init();
+ },
+ pageNo() {
+ if (this.toTop) {
+ // 页码变动时跳转到页面顶部
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth"
+ });
+ }
+ }
+ },
+ computed: {
+ totalPage() {
+ return Math.ceil(this.total / this.pageSize);
+ }
+ },
+ methods: {
+ init() {
+ // this.totalPage = Math.ceil(this.total / this.pageSize)
+ // console.log("aaaaaaaaaaaaaaaaaaaaa");
+ // this.pageList = []
+ // for (let i = 1; i <= this.totalPage; i++) {
+ // this.pageList.push(i)
+ // }
+ },
+ next() {
+ if (this.pageNo < this.totalPage) {
+ this.$emit("update:pageNo", this.pageNo + 1);
+ }
+ },
+ prev() {
+ if (this.pageNo > 1) {
+ this.$emit("update:pageNo", this.pageNo - 1);
+ }
+ }
+ }
+};
</script>
<style lang="less" scoped>
@@ -57,32 +100,33 @@
@green: #c4d600;
.n_pagination {
- width: 100%;
- height: 2em;
- color: #646566;
+ width: 100%;
+ height: 2em;
+ color: #646566;
- .n_page_number {
- width: 3em;
+ .n_page_number {
+ width: 3em;
- span {
- font-size: .37em;
- }
+ span {
+ font-size: 0.37em;
}
+ }
- .n_pagination_item {
- border: .01em solid @green2;
- width: 3em;
- height: 1em;
- color: @green;
+ .n_pagination_item {
+ border: 0.01em solid @green2;
+ width: 3em;
+ height: 1em;
+ color: @green;
+ background-color: #fff;
- span {
- font-size: .4em;
- }
+ span {
+ font-size: 0.4em;
}
+ }
- .prohibited {
- background-color: #f7f8fa;
- color: #c4c5c6;
- }
+ .prohibited {
+ background-color: #f7f8fa;
+ color: #c4c5c6;
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3