分页组件
person 努力前行
watch_later 2024-09-14 22:37:08
visibility 270
class 分页
bookmark 分类
在 Vue 中实现一个动态分页组件，并结合 Materialize CSS 框架，可以根据页数动态显示分页项，并在需要时展开隐藏的分页页码。以下是一个详细的实现步骤和示例代码。
1. 组件结构设计
我们将创建一个 Vue 组件来实现分页功能。这个组件将支持以下功能：
- 显示当前页和总页数。
- 如果页数大于 10，则隐藏部分分页页码，并提供展开/收起的功能。
- 在翻页时自动展开隐藏的分页页码。
2. 创建 Vue 组件
以下是一个实现动态分页组件的完整示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态分页组件示例</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<style>
.pagination {
margin-top: 20px; /* 自定义分页顶部间距 */
}
.pagination .hide-pages {
display: none; /* 初始隐藏的分页项 */
}
.pagination .show-more {
cursor: pointer;
color: #ff5722; /* 自定义“展开更多”文字颜色 */
}
</style>
</head>
<body>
<div id="app">
<pagination-component :total-pages="totalPages" :current-page="currentPage"></pagination-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
Vue.component('pagination-component', {
props: ['totalPages', 'currentPage'],
data() {
return {
showMore: false,
};
},
computed: {
paginationItems() {
let items = [];
if (this.totalPages <= 10) {
for (let i = 1; i <= this.totalPages; i++) {
items.push(i);
}
} else {
// Handle pagination when there are more than 10 pages
let start = Math.max(1, this.currentPage - 4);
let end = Math.min(this.totalPages, this.currentPage + 4);
if (this.currentPage <= 5) {
end = Math.min(10, this.totalPages);
}
if (this.currentPage > this.totalPages - 5) {
start = Math.max(this.totalPages - 9, 1);
}
for (let i = start; i <= end; i++) {
items.push(i);
}
if (start > 1) {
items.unshift('...');
}
if (end < this.totalPages) {
items.push('...');
}
}
return items;
},
showMoreText() {
return this.showMore ? '收起' : '更多';
}
},
methods: {
goToPage(page) {
if (page === '...' || page === this.currentPage) return;
this.$emit('update:currentPage', page);
},
toggleShowMore() {
this.showMore = !this.showMore;
}
},
template: `
<div>
<ul class="pagination">
<li class="waves-effect" :class="{disabled: currentPage === 1}">
<a @click="goToPage(currentPage - 1)">
<i class="material-icons">chevron_left</i>
</a>
</li>
<li v-for="(item, index) in paginationItems" :key="index" :class="{'active': item === currentPage, 'waves-effect': item !== currentPage && item !== '...'}">
<a @click="goToPage(item)">{{ item }}</a>
</li>
<li v-if="totalPages > 10" class="waves-effect">
<a @click="toggleShowMore" class="show-more">{{ showMoreText }}</a>
</li>
<li class="waves-effect" :class="{disabled: currentPage === totalPages}">
<a @click="goToPage(currentPage + 1)">
<i class="material-icons">chevron_right</i>
</a>
</li>
</ul>
</div>
`
});
new Vue({
el: '#app',
data: {
currentPage: 1,
totalPages: 15
},
methods: {
handlePageChange(page) {
this.currentPage = page;
}
}
});
</script>
</body>
</html>
3. 代码解析
HTML 和 CSS
- 使用
materialize框架提供的 CSS 样式来美化分页组件。 .hide-pages类用于隐藏部分分页项，并通过 Vue 的逻辑在需要时显示它们。
Vue 组件
pagination-component是一个 Vue 组件，接受totalPages和currentPage作为 props。paginationItems计算属性用于生成需要显示的分页项。当总页数大于 10 时，分页项会根据当前页动态显示，并在必要时显示省略号。showMore数据属性用于控制是否显示更多分页项。goToPage方法用于切换页面并发出事件。toggleShowMore方法用于切换“展开更多”按钮的显示状态。
4. 使用说明
- 在 HTML 文件中引入 Vue 和 Materialize CSS。
- 创建一个 Vue 实例，将
pagination-component添加到页面中，并设置初始页码和总页数。 - 根据需要修改
totalPages和currentPage属性来测试不同的分页情况。
这个动态分页组件可以适应不同的页面数量和用户需求，提供了一种灵活且用户友好的分页解决方案。
chat评论区
评论列表
