写个简易分页器 1.定义全局的简易分页组件 2.当前是第一页的时候，“上一页”按钮不显示。当页数为 15 页时候，“下一页”按钮不显示。

以下是一个简单的分页器组件示例，可以根据需要进行修改：

<template>
  <div class="pagination">
    <button v-if="currentPage > 1" @click="prevPage">上一页</button>
    <span v-for="n in pageCount" :key="n" :class="{ active: n === currentPage }" @click="changePage(n)">{{ n }}</span>
    <button v-if="currentPage < pageCount" @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      required: true
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  methods: {
    prevPage() {
      this.$emit('page-change', this.currentPage - 1)
    },
    nextPage() {
      this.$emit('page-change', this.currentPage + 1)
    },
    changePage(page) {
      this.$emit('page-change', page)
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination button,
.pagination span {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.pagination span.active {
  background-color: #ccc;
  color: #fff;
  border: 1px solid #ccc;
}
</style>

使用方法：

<template>
  <div>
    <!-- 分页器组件 -->
    <pagination :current-page="currentPage" :total="total" @page-change="handlePageChange" />

    <!-- 列表数据 -->
    <ul>
      <li v-for="item in displayedData" :key="item.id">{{ item }}</li>
    </ul>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    Pagination,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
      listData: [],
    };
  },
  computed: {
    displayedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.listData.slice(start, end);
    },
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
    fetchData() {
      // 获取数据并赋值给 listData 和 total
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

在上面的示例中，`Pagination` 组件接收三个 props：

- `currentPage`：当前页码，默认值为 1。
- `pageSize`：每页显示的数据条数，默认值为 10。
- `total`：总数据条数，必须传入。

`Pagination` 组件会根据这些参数计算出总页数 `pageCount`，并显示相应的页码按钮。当点击上一页或下一页按钮时，`Pagination` 组件会触发 `page-change` 事件，将当前页码传递给父组件。父组件根据当前页码和每页显示的数据条数计算出要显示的数据，并渲染到页面上。