vue3.0仿写百度分页组件 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 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>