作业 :简易分页器 需求说明 1、定义全局的简易分页组件 2、如果当前是第一页的时候，“上一页”按钮不显示，总共是 15 页内容， 当页数为 15 页时候，“下一页”按钮不显示。 3、当点击“上一页”按钮或者“下一页”按钮的时候可以实现去到上一页 或者下一页的效果，效果如下图所示:

为了实现这个简易分页器，我们可以采用以下步骤：

1. 定义一个全局的组件 `Pagination`，其中包含以下属性：

- `currentPage`：当前页码（默认值为1）
- `totalPage`：总页数（默认值为15）
- `prevText`：上一页按钮的文本（默认值为"上一页"）
- `nextText`：下一页按钮的文本（默认值为"下一页"）

2. 在组件内部，根据当前页码和总页数计算出上一页和下一页的页码。
3. 根据上一页和下一页的页码，确定上一页和下一页按钮是否显示。
4. 当点击上一页或下一页按钮时，修改当前页码并触发一个自定义事件 `page-change`，将新的页码作为参数传递出去。
5. 在父组件中监听 `page-change` 事件，并根据新的页码重新渲染组件。

以下是一个简单的实现示例：

<!-- Pagination.vue -->
<template>
  <div class="pagination">
    <button v-if="currentPage > 1" @click="changePage(currentPage - 1)">{{ prevText }}</button>
    <span>第 {{ currentPage }} 页 / 共 {{ totalPage }} 页</span>
    <button v-if="currentPage < totalPage" @click="changePage(currentPage + 1)">{{ nextText }}</button>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    totalPage: {
      type: Number,
      default: 15
    },
    prevText: {
      type: String,
      default: "上一页"
    },
    nextText: {
      type: String,
      default: "下一页"
    }
  },
  methods: {
    changePage(page) {
      if (page < 1 || page > this.totalPage) return;
      this.$emit("page-change", page);
    }
  }
};
</script>

<!-- App.vue -->
<template>
  <div class="app">
    <Pagination :currentPage="currentPage" :totalPage="totalPage" @page-change="handlePageChange" />
  </div>
</template>

<script>
import Pagination from "./components/Pagination";

export default {
  name: "App",
  components: {
    Pagination
  },
  data() {
    return {
      currentPage: 1,
      totalPage: 15
    };
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>