当前位置：首页 > VUE

vue css实现分页

2026-01-19 15:24:41VUE

实现分页的CSS方法

在Vue项目中实现分页功能，通常需要结合CSS样式来控制分页器的外观和交互效果。以下是几种常见的CSS实现方法：

基础分页样式

通过CSS定义分页容器的基本样式，包括分页按钮的排列、间距和颜色：

.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  display: block;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
}

.pagination a:hover {
  background-color: #f5f5f5;
}

.pagination .active a {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

禁用状态样式

为不可点击的页码（如当前页或超出范围的页码）添加特殊样式：

.pagination .disabled a {
  color: #ccc;
  cursor: not-allowed;
  background-color: #f8f9fa;
  border-color: #ddd;
}

响应式分页

针对不同屏幕尺寸调整分页样式：

@media (max-width: 576px) {
  .pagination li {
    margin: 0 2px;
  }

  .pagination a {
    padding: 6px 8px;
    font-size: 14px;
  }
}

Vue组件中的分页实现

在Vue组件中，可以结合上述CSS样式创建分页功能：

模板部分

<template>
  <ul class="pagination">
    <li :class="{ disabled: currentPage === 1 }">
      <a href="#" @click.prevent="changePage(1)">First</a>
    </li>
    <li :class="{ disabled: currentPage === 1 }">
      <a href="#" @click.prevent="changePage(currentPage - 1)">Previous</a>
    </li>

    <li v-for="page in pages" :key="page" :class="{ active: currentPage === page }">
      <a href="#" @click.prevent="changePage(page)">{{ page }}</a>
    </li>

    <li :class="{ disabled: currentPage === totalPages }">
      <a href="#" @click.prevent="changePage(currentPage + 1)">Next</a>
    </li>
    <li :class="{ disabled: currentPage === totalPages }">
      <a href="#" @click.prevent="changePage(totalPages)">Last</a>
    </li>
  </ul>
</template>

脚本部分

<script>
export default {
  props: {
    totalItems: Number,
    itemsPerPage: Number,
    currentPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    },
    pages() {
      const range = [];
      const start = Math.max(1, this.currentPage - 2);
      const end = Math.min(this.totalPages, this.currentPage + 2);

      for (let i = start; i <= end; i++) {
        range.push(i);
      }

      return range;
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
        this.$emit('page-changed', page);
      }
    }
  }
};
</script>

高级分页效果

过渡动画

为分页切换添加平滑的过渡效果：

.pagination li {
  transition: all 0.3s ease;
}

.pagination a {
  transition: background-color 0.3s, color 0.3s;
}

悬浮效果增强

vue css实现分页

.pagination a {
  position: relative;
  overflow: hidden;
}

.pagination a:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 123, 255, 0.1);
  z-index: -1;
}

这些方法可以根据实际项目需求进行调整和组合，创建出符合设计规范的分页组件。