vue css实现分页
Vue 中实现分页的 CSS 方案
在 Vue 中实现分页功能时，CSS 主要用于样式设计和布局控制。以下是几种常见的实现方法：
基础分页样式
通过 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>响应式分页设计
通过媒体查询实现移动端适配：
@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 的数据绑定和事件处理完美结合，创建出美观且功能完善的分页组件。开发者可以根据项目需求调整样式细节，如颜色、间距、圆角等参数。
