我写的<template><div class="paginations" v-if='totalItems > 0'><button @click="changePage(1)"  >首页</button><button @click="changePage(currentPage - 1)" :disabled="currentPage === 1" :class="{ disabled: currentPage === 1 }" >上一页</button><buttonv-for="page in pages":key="page"@click="changePage(page)":class="{ active: page === currentPage }">{{ page }}</button><button@click="changePage(currentPage + 1)":class="{ disabled: (totalPages === 1||currentPage === totalPages) }":disabled="(totalPages === 1||currentPage === totalPages)">下一页</button><!-- <button  @click="changePage(totalPages)">末页</button> --></div>
</template><script>
import {defineComponent,ref,watch,onMounted,onBeforeMount,computed,
} from "vue";export default defineComponent({name: "pagination",props: {totalItems: {type: Number,},pageSize: {type: Number,default: 10,},current: {type: Number,default: 1,},},setup(props, { emit }) {const currentPage = ref(1);watch(() => props.current,(newVal) => {currentPage.value = newVal;},{immediate: true, // 这个属性是重点啦deep: true, // 深度监听的参数});const totalPages = ref(0);const pages = ref([]);onBeforeMount(() => {});onMounted(() => {});const changePage = (page) => {if (page < 1 || page > totalPages.value) {return;}currentPage.value = page;emit("page-change", page);};watch(() => props.totalItems,(newVal) => {// 显示在分页上的页码开始结束 最多5个，start end 表示显示在开始结束位置的页码totalPages.value = Math.ceil(newVal / props.pageSize);const start = Math.max(1, currentPage.value - 2);const end = Math.min(Math.ceil(newVal / props.pageSize),currentPage.value + 2);const page = [];for (let i = start; i <= end; i++) {page.push(i);}pages.value = page;},{immediate: true, // 这个属性是重点啦deep: true, // 深度监听的参数});watch(() => currentPage,(newVal) => {totalPages.value = Math.ceil(props.totalItems / props.pageSize);const start = Math.max(1, newVal.value - 2);const end = Math.min(totalPages.value, newVal.value + 2);const page = [];for (let i = start; i <= end; i++) {page.push(i);}pages.value = page;},{immediate: true, // 这个属性是重点啦deep: true, // 深度监听的参数});return {changePage,currentPage,totalPages,pages,};},
});
</script><style>
.paginations {display: flex;
}
.paginations button {margin: 0 5px;padding: 5px 10px;border: 1px solid #ccc;background-color: #fff;cursor: pointer;
}
.paginations button.active,
.paginations button:hover {background-color: #007bff;color: #fff;cursor: pointer;
}
.paginations button.disabled {opacity: 0.5;cursor: not-allowed;background-color: #ccc;
}
</style>chatgpt优化它<template><div class="paginations" v-if="totalItems > 0"><button @click="changePage(1)">首页</button><button @click="changePage(currentPage - 1)" :disabled="currentPage === 1" :class="{ disabled: currentPage === 1 }">上一页</button><button v-for="page in pageRange" :key="page" @click="changePage(page)" :class="{ active: page === currentPage }">{{ page }}</button><button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages" :class="{ disabled: currentPage === totalPages }">下一页</button></div>
</template><script>
import { defineComponent, ref, computed, watchEffect } from "vue";export default defineComponent({name: "Pagination",props: {totalItems: {type: Number,required: true,},pageSize: {type: Number,default: 10,},current: {type: Number,default: 1,},},setup(props, { emit }) {const currentPage = ref(props.current);const totalPages = computed(() => Math.ceil(props.totalItems / props.pageSize));const pageRange = computed(() => {const range = [];const start = Math.max(1, currentPage.value - 2);const end = Math.min(totalPages.value, currentPage.value + 2);for (let i = start; i <= end; i++) {range.push(i);}return range;});watchEffect(() => {currentPage.value = props.current;});const changePage = (page) => {if (page < 1 || page > totalPages.value) {return;}currentPage.value = page;emit("page-change", page);};return {currentPage,totalPages,pageRange,changePage,};},
});
</script><style>
.paginations {display: flex;
}.paginations button {margin: 0 5px;padding: 5px 10px;border: 1px solid #ccc;background-color: #fff;cursor: pointer;
}.paginations button.active,
.paginations button:hover {background-color: #007bff;color: #fff;cursor: pointer;
}.paginations button.disabled {opacity: 0.5;cursor: not-allowed;background-color: #ccc;
}
</style>