当前位置：首页 > VUE

vue css实现分页

2026-02-20 07:41:57VUE

Vue 中实现分页的 CSS 方案

在 Vue 中实现分页功能时，CSS 主要用于样式设计和布局控制。以下是几种常见的实现方法：

基础分页样式

通过 CSS 定义分页按钮的布局和交互效果：

vue css实现分页

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

.page-item {
  margin: 0 5px;
}

.page-link {
  padding: 8px 12px;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s;
}

.page-link:hover {
  background-color: #f0f0f0;
}

.active .page-link {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: not-allowed;
}

结合 Vue 组件

在 Vue 组件中应用上述样式：

<template>
  <ul class="pagination">
    <li class="page-item" :class="{ disabled: currentPage === 1 }">
      <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">Previous</a>
    </li>
    <li v-for="page in totalPages" :key="page" class="page-item" :class="{ active: page === currentPage }">
      <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
    </li>
    <li class="page-item" :class="{ disabled: currentPage === totalPages }">
      <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">Next</a>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    currentPage: Number,
    totalPages: Number
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page);
      }
    }
  }
};
</script>

响应式分页设计

通过媒体查询实现移动端适配：

vue css实现分页

@media (max-width: 576px) {
  .pagination {
    flex-wrap: wrap;
  }
  .page-item {
    margin: 2px;
  }
  .page-link {
    padding: 6px 8px;
    font-size: 14px;
  }
}

动画效果增强

为分页切换添加过渡动画：

.page-link {
  transition: all 0.2s ease-in-out;
}

.page-link:active {
  transform: scale(0.95);
}

主题定制

通过 CSS 变量实现主题色定制：

:root {
  --primary-color: #007bff;
  --hover-color: #f0f0f0;
}

.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.page-link:hover {
  background-color: var(--hover-color);
}

这些 CSS 方案可以与 Vue 的数据绑定和事件处理完美结合，创建出美观且功能完善的分页组件。开发者可以根据项目需求调整样式细节，如颜色、间距、圆角等参数。