Vue.js分页组件如何实现diVuePagination-创新互联

这篇文章给大家分享的是有关Vue.js分页组件如何实现diVuePagination的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

一.介绍

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二.创建初始化项目

这里不在详细说明，我们的分页演示只需要vue和vue-router就可以了，我们直接构建项目和设置配置。

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // （缩写）相当于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

App.vue:

pageHome.vue:

pageInfo.vue:

pageNews.vue:

预览效果：

三.分页静态结构和样式

divuePage.vue:

main.js注册：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//注册组件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // （缩写）相当于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

pageHome.vue引用：

效果预览：

四.分页组件实现逻辑分析

我们分析一下如何实现我们的分页组件：

从分页组件考虑：

分页组件需要显示页数，那么就需要传递给分页组件总用多少页这个状态，

上一页和下一页存在不可用状态，在第一页上一页不可用，所以要把当前所在页数传递，同样页数的焦点位置也需要它判断，

然后就是方法，我们页数和按钮的点击都是发起请求，携带的参数就是当前点击的页数，

1.总页数，当前所在页，可在父组件传递进入

2.发起请求的方法可以通过组件交互通信实现

1的数据都是接口会返回给我们的，我们直接以属性传递即可：

2的实现也很简单，我们其实已经处理模拟使用过了：

我们只需要自定义事件，让分页组件$emit即可：

pageHome.vue:

五.分页组件逻辑编写

divuePage.vue我们接受了这些传递的内容，总页数和当前所在页，然后点击第一页触发自定义事件，传递给父组件一个1，获取第一页数据：

1.页数显示

我们的首要工作就是把页数显示出来，我们已经接收了总页数，其实这个问题很容易解决，我们设置一个计算属性，属性依据总页数生成一个数组，从1到n即可：

显示：

这样还不够健壮，还有一个就是总页数5做分界线，大于5就显示当前到后4个，

比如在第3页，显示：3 4 5 6 7

第2页，显示：2 3 4 5 6

好了我们加入一些小的逻辑判断：

我们要给当前页加一个类名标识，已经获取当前的页数了，我们加一个判断就可以了，在v-for中：

我们在加入点击事件，拿到点击的item就是要请求后台数据的参数page:

定义这个方法：

完整代码：

效果测试：

2.第一页和最后一页处理

这个很简单，只是传递page参数，我们已经获取总页数，直接设置即可！

3.上一页和下一页处理

这个对比第一页需要加入特殊的处理，当前是第一页，这个按钮就不可用状态，下一页一样的逻辑判断当前是不是在最后一页：

调用位置加入事件，在加一个是否可用的类名：

全部代码：

效果测试：

4.跳页处理

这个我们获取输入框的值，直接调用，不过对输入的内容必须有一些判断限制：

加一个data:

使用位置：

5.显示总页数

这个是最简单的：

六.分页全部代码和测试

divuePage.vue:

我们现在在pageHome.vue做了使用，这个模拟数据包含7页，我们在另外两个组件也使用分页组件，测试小于5页和只有1页的效果：

直接粘贴就可以在另外的组件使用。

只有1页：

小于5页：

测试没有太大问题！

七.优化和改进建议

当然不是样式的优化，这个需要设计的参与，我们还是显示的优化和改进，比如：

我们是不是该有一个...

还有就是...

可以参考别的分页效果，然后你可以不断的改进！

八.完整代码

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//注册组件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // （缩写）相当于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

App.vue:

divuePage.vue:

pageHome.vue:

pageInfo.vue:

pageNews.vue:

感谢各位的阅读！关于“Vue.js分页组件如何实现diVuePagination”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。