如何在vue-pagination-2中隐藏页码，仅保留前后按钮？

嘿，这事儿好办！要让vue-pagination只显示Back和Next按钮、隐藏中间的页码，核心就是利用组件的配置属性来控制显示逻辑，下面分两种常见情况给你解决方案：

情况1：使用主流的vue-pagination-2组件 #

这个组件本身就提供了直接隐藏页码的配置项，你只需要在组件标签里添加两个关键属性：

• hide-page-numbers：直接隐藏所有页码数字
• prev-text/next-text：把默认的</>替换成你想要的"Back"和"Next"

给你个完整的代码示例：

<template>
  <div>
    <pagination
      :page-count="totalPageCount"
      :current-page="currentPage"
      hide-page-numbers
      prev-text="Back"
      next-text="Next"
      @page-changed="onPageChange"
    />
  </div>
</template>

<script>
import Pagination from 'vue-pagination-2'

export default {
  components: { Pagination },
  data() {
    return {
      currentPage: 1,
      totalPageCount: 8 // 替换成你实际的总页数
    }
  },
  methods: {
    onPageChange(page) {
      this.currentPage = page
      // 这里写你的分页数据请求逻辑
    }
  }
}
</script>

情况2：自定义或其他小众分页组件 #

如果你的组件没有现成的隐藏页码属性，那就用CSS来精准隐藏页码元素：
先打开浏览器开发者工具，找到页码对应的DOM类名（比如.page-item或者.page-number），然后添加样式：

/* 替换成你实际的页码类名 */
.pagination .page-number {
  display: none;
}
/* 确保上一页/下一页按钮保留显示 */
.pagination .prev-btn,
.pagination .next-btn {
  display: inline-block;
}

这样就能完美实现只显示Back和Next按钮的效果啦！

内容的提问来源于stack exchange，提问作者fh_bash