首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue.js分页组件实现：diVuePagination的使用详解

Posted in Javascript onJanuary 10, 2018

一.介绍

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:

<template>
 <div id="app">
 <h3>{{msg}}</h3>
 <ul>
 <li><router-link to="/">pageHome</router-link></li>
 <li><router-link to="/pageNews">pageNews</router-link></li>
 <li><router-link to="/pageInfo">pageInfo</router-link></li>
 </ul>
 <div>
 <router-view></router-view>
 </div>
 </div>
</template>
<script>
export default {
 name: 'app',
 data () {
 return {
 msg: '分页组件：DiVuePage '
 }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

pageHome.vue:

<template>
 <div class="page">
 <p>//模拟ajax数据 1-7页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 </div>
</template>
<script>
export default {
 name: 'pageHome',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1-7页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=7
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==4){
 list=[
 {id:1,text:"161616"},
 {id:2,text:"171717"},
 {id:3,text:"181818"},
 {id:4,text:"191919"},
 {id:5,text:"202020"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==5){
 list=[
 {id:1,text:"2121"},
 {id:2,text:"22222"},
 {id:3,text:"232323"},
 {id:4,text:"242424"},
 {id:5,text:"252525"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==6){
 list=[
 {id:1,text:"2626"},
 {id:2,text:"2727"},
 {id:3,text:"2828"},
 {id:4,text:"2929"},
 {id:5,text:"3030"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==7){
 list=[
 {id:1,text:"3131"},
 {id:2,text:"3232"}
 ]
 allpage=7
 nextpage=false; 
 };
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

pageInfo.vue:

<template>
 <div class="page">
 <p>//模拟ajax数据 1-3页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 </div>
</template>
<script>
export default {
 name: 'pageInfo',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1-3页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=3
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=3
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=3
 nextpage=false; 
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

pageNews.vue:

<template>
 <div class="page">
 <p>模拟ajax数据 1页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 </div>
</template>
<script>
export default {
 name: 'pageNews',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"}
 ]
 allpage=1
 nextpage=false;
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

预览效果：

Vue.js分页组件实现：diVuePagination的使用详解

三.分页静态结构和样式

divuePage.vue:

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn">第一页</div>
 <div class="DiReactPage-btn disable">上一页</div>
 <div class="DiReactPage-page">
 <span class="active">1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 </div>
 <div class="DiReactPage-btn">下一页</div>
 <div class="DiReactPage-btn">最后一页</div>
 <div class="DiReactPage-btn">总4页</div>
 <input class="DiReactPage-input" type="text" />
 <button class="DiReactPage-btn">跳转</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 data () {
 return {
 pages:[1,2,3,4,5]
 }
 },
 methods:{
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

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引用：

<template>
 <div class="page">
 <p>//模拟ajax数据 1-7页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 <divue-page></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageHome',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1-7页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=7
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==4){
 list=[
 {id:1,text:"161616"},
 {id:2,text:"171717"},
 {id:3,text:"181818"},
 {id:4,text:"191919"},
 {id:5,text:"202020"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==5){
 list=[
 {id:1,text:"2121"},
 {id:2,text:"22222"},
 {id:3,text:"232323"},
 {id:4,text:"242424"},
 {id:5,text:"252525"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==6){
 list=[
 {id:1,text:"2626"},
 {id:2,text:"2727"},
 {id:3,text:"2828"},
 {id:4,text:"2929"},
 {id:5,text:"3030"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==7){
 list=[
 {id:1,text:"3131"},
 {id:2,text:"3232"}
 ]
 allpage=7
 nextpage=false; 
 };
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

效果预览：

Vue.js分页组件实现：diVuePagination的使用详解

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

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

从分页组件考虑：

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

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

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

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

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

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

Vue.js分页组件实现：diVuePagination的使用详解

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

Vue.js分页组件实现：diVuePagination的使用详解

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

Vue.js分页组件实现：diVuePagination的使用详解

pageHome.vue:

<template>
 <div class="page">
 <p>//模拟ajax数据 1-7页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 <divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageHome',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1-7页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=7
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==4){
 list=[
 {id:1,text:"161616"},
 {id:2,text:"171717"},
 {id:3,text:"181818"},
 {id:4,text:"191919"},
 {id:5,text:"202020"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==5){
 list=[
 {id:1,text:"2121"},
 {id:2,text:"22222"},
 {id:3,text:"232323"},
 {id:4,text:"242424"},
 {id:5,text:"252525"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==6){
 list=[
 {id:1,text:"2626"},
 {id:2,text:"2727"},
 {id:3,text:"2828"},
 {id:4,text:"2929"},
 {id:5,text:"3030"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==7){
 list=[
 {id:1,text:"3131"},
 {id:2,text:"3232"}
 ]
 allpage=7
 nextpage=false; 
 };
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

五.分页组件逻辑编写

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

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一页</div>
 <div class="DiReactPage-btn disable">上一页</div>
 <div class="DiReactPage-page">
 <span class="active">1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 </div>
 <div class="DiReactPage-btn">下一页</div>
 <div class="DiReactPage-btn">最后一页</div>
 <div class="DiReactPage-btn">总4页</div>
 <input class="DiReactPage-input" type="text" />
 <button class="DiReactPage-btn">跳转</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//点击第一页 
 this.$emit("getajaxlist",1);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

1.页数显示

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

Vue.js分页组件实现：diVuePagination的使用详解

显示：

Vue.js分页组件实现：diVuePagination的使用详解

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

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

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

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

Vue.js分页组件实现：diVuePagination的使用详解

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

Vue.js分页组件实现：diVuePagination的使用详解

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

Vue.js分页组件实现：diVuePagination的使用详解

定义这个方法：

Vue.js分页组件实现：diVuePagination的使用详解

完整代码：

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一页</div>
 <div class="DiReactPage-btn disable">上一页</div>
 <div class="DiReactPage-page">
 <span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
 </div>
 <div class="DiReactPage-btn">下一页</div>
 <div class="DiReactPage-btn">最后一页</div>
 <div class="DiReactPage-btn">总4页</div>
 <input class="DiReactPage-input" type="text" />
 <button class="DiReactPage-btn">跳转</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 computed:{
 pages:function(){
 var arr=[];
 if(this.allpage>5){
 if(this.currentpage+5>this.allpage){
 for(var i=this.currentpage;i<=this.allpage;i++){
 arr.push(i);
 };
 }else{
 for(var i=this.currentpage;i<this.currentpage+5;i++){
 arr.push(i);
 };
 };
 }else{
 for(var i=1;i<=this.allpage;i++){
 arr.push(i);
 };
 }
 return arr;
 }
 },
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//点击第一页 
 this.$emit("getajaxlist",1);
 },
 clickCurrent:function(item){
 this.$emit("getajaxlist",item);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

效果测试：

Vue.js分页组件实现：diVuePagination的使用详解

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

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

Vue.js分页组件实现：diVuePagination的使用详解

Vue.js分页组件实现：diVuePagination的使用详解

3.上一页和下一页处理

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

Vue.js分页组件实现：diVuePagination的使用详解

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

Vue.js分页组件实现：diVuePagination的使用详解

全部代码：

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一页</div>
 <div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一页</div>
 <div class="DiReactPage-page">
 <span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
 </div>
 <div class="DiReactPage-btn" v-on:click="clickNext" v-bind:class="{disable:currentpage==allpage}">下一页</div>
 <div class="DiReactPage-btn" v-on:click="clickLast">最后一页</div>
 <div class="DiReactPage-btn">总4页</div>
 <input class="DiReactPage-input" type="text" />
 <button class="DiReactPage-btn">跳转</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 computed:{
 pages:function(){
 var arr=[];
 if(this.allpage>5){
 if(this.currentpage+5>this.allpage){
 for(var i=this.currentpage;i<=this.allpage;i++){
 arr.push(i);
 };
 }else{
 for(var i=this.currentpage;i<this.currentpage+5;i++){
 arr.push(i);
 };
 };
 }else{
 for(var i=1;i<=this.allpage;i++){
 arr.push(i);
 };
 }
 return arr;
 }
 },
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//点击第一页 
 this.$emit("getajaxlist",1);
 },
 clickCurrent:function(item){
 this.$emit("getajaxlist",item);
 },
 clickLast:function(){//点击最后一页
 this.$emit("getajaxlist",this.allpage);
 },
 clickPrev:function(){//点击上一页
 if(this.currentpage-1<1){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage-1);
 },
 clickNext:function(){//点击下一页
 if(this.currentpage+1>this.allpage){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage+1);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

效果测试：

Vue.js分页组件实现：diVuePagination的使用详解

4.跳页处理

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

Vue.js分页组件实现：diVuePagination的使用详解

加一个data:

Vue.js分页组件实现：diVuePagination的使用详解

使用位置：

Vue.js分页组件实现：diVuePagination的使用详解

5.显示总页数

这个是最简单的：

Vue.js分页组件实现：diVuePagination的使用详解

六.分页全部代码和测试

divuePage.vue:

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一页</div>
 <div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一页</div>
 <div class="DiReactPage-page">
 <span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
 </div>
 <div class="DiReactPage-btn" v-on:click="clickNext" v-bind:class="{disable:currentpage==allpage}">下一页</div>
 <div class="DiReactPage-btn" v-on:click="clickLast">最后一页</div>
 <div class="DiReactPage-btn">总{{allpage}}页</div>
 <input class="DiReactPage-input" type="text" v-model="skipvalue" />
 <button class="DiReactPage-btn" v-on:click="clickSkip">跳转</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 computed:{
 pages:function(){
 var arr=[];
 if(this.allpage>5){
 if(this.currentpage+5>this.allpage){
 for(var i=this.currentpage;i<=this.allpage;i++){
 arr.push(i);
 };
 }else{
 for(var i=this.currentpage;i<this.currentpage+5;i++){
 arr.push(i);
 };
 };
 }else{
 for(var i=1;i<=this.allpage;i++){
 arr.push(i);
 };
 }
 return arr;
 }
 },
 data:function(){
 return {
 skipvalue:""
 }
 },
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//点击第一页 
 this.$emit("getajaxlist",1);
 },
 clickCurrent:function(item){
 this.$emit("getajaxlist",item);
 },
 clickLast:function(){//点击最后一页
 this.$emit("getajaxlist",this.allpage);
 },
 clickPrev:function(){//点击上一页
 if(this.currentpage-1<1){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage-1);
 },
 clickNext:function(){//点击下一页
 if(this.currentpage+1>this.allpage){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage+1);
 },
 clickSkip:function(){//点击下一页
 if(isNaN(this.skipvalue)){
 console.log("必须是数字")
 return false;
 }
 if(this.skipvalue<1 || this.skipvalue>this.allpage){
 console.log("超过范围")
 return false;
 }
 this.$emit("getajaxlist",this.skipvalue);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

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

<divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>

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

只有1页：

Vue.js分页组件实现：diVuePagination的使用详解

小于5页：

Vue.js分页组件实现：diVuePagination的使用详解

测试没有太大问题！

七.优化和改进建议

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

Vue.js分页组件实现：diVuePagination的使用详解

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

还有就是...

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

八.完整代码

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:

<template>
 <div id="app">
 <h3>{{msg}}</h3>
 <ul>
 <li><router-link to="/">pageHome</router-link></li>
 <li><router-link to="/pageNews">pageNews</router-link></li>
 <li><router-link to="/pageInfo">pageInfo</router-link></li>
 </ul>
 <div>
 <router-view></router-view>
 </div>
 </div>
</template>
 
<script>
export default {
 name: 'app',
 data () {
 return {
 msg: '分页组件：DiVuePage '
 }
 }
}
</script>
 
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

divuePage.vue:

<template>
 <div class="DiReactPage">
 <div class="DiReactPage-btn" v-on:click="clickFirst">第一页</div>
 <div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一页</div>
 <div class="DiReactPage-page">
 <span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
 </div>
 <div class="DiReactPage-btn" v-on:click="clickNext" v-bind:class="{disable:currentpage==allpage}">下一页</div>
 <div class="DiReactPage-btn" v-on:click="clickLast">最后一页</div>
 <div class="DiReactPage-btn">总{{allpage}}页</div>
 <input class="DiReactPage-input" type="text" v-model="skipvalue" />
 <button class="DiReactPage-btn" v-on:click="clickSkip">跳转</button>
 </div>
</template>
<script>
export default {
 name: 'divuePage',
 computed:{
 pages:function(){
 var arr=[];
 if(this.allpage>5){
 if(this.currentpage+5>this.allpage){
 for(var i=this.currentpage;i<=this.allpage;i++){
 arr.push(i);
 };
 }else{
 for(var i=this.currentpage;i<this.currentpage+5;i++){
 arr.push(i);
 };
 };
 }else{
 for(var i=1;i<=this.allpage;i++){
 arr.push(i);
 };
 }
 return arr;
 }
 },
 data:function(){
 return {
 skipvalue:""
 }
 },
 props:["currentpage","allpage"],
 methods:{
 clickFirst:function(){//点击第一页 
 this.$emit("getajaxlist",1);
 },
 clickCurrent:function(item){
 this.$emit("getajaxlist",item);
 },
 clickLast:function(){//点击最后一页
 this.$emit("getajaxlist",this.allpage);
 },
 clickPrev:function(){//点击上一页
 if(this.currentpage-1<1){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage-1);
 },
 clickNext:function(){//点击下一页
 if(this.currentpage+1>this.allpage){
 return false;
 }
 this.$emit("getajaxlist",this.currentpage+1);
 },
 clickSkip:function(){//点击下一页
 if(isNaN(this.skipvalue)){
 console.log("必须是数字")
 return false;
 }
 if(this.skipvalue<1 || this.skipvalue>this.allpage){
 console.log("超过范围")
 return false;
 }
 this.$emit("getajaxlist",this.skipvalue);
 }
 }
}
</script>
<style>
 .DiReactPage{ height:30px; line-height:30px; text-align:center;}
 .DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
 .DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
 .DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
 .DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
 .DiReactPage .DiReactPage-page span.active{ color:#09F; }
 .DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>

pageHome.vue:

<template>
 <div class="page">
 <p>//模拟ajax数据 1-7页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 <divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageHome',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1-7页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=7
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==4){
 list=[
 {id:1,text:"161616"},
 {id:2,text:"171717"},
 {id:3,text:"181818"},
 {id:4,text:"191919"},
 {id:5,text:"202020"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==5){
 list=[
 {id:1,text:"2121"},
 {id:2,text:"22222"},
 {id:3,text:"232323"},
 {id:4,text:"242424"},
 {id:5,text:"252525"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==6){
 list=[
 {id:1,text:"2626"},
 {id:2,text:"2727"},
 {id:3,text:"2828"},
 {id:4,text:"2929"},
 {id:5,text:"3030"},
 ]
 allpage=7
 nextpage=true; 
 }else if(currentpage==7){
 list=[
 {id:1,text:"3131"},
 {id:2,text:"3232"}
 ]
 allpage=7
 nextpage=false; 
 };
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

pageInfo.vue:

<template>
 <div class="page">
 <p>//模拟ajax数据 1-3页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 <divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageInfo',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1-3页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=3
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=3
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=3
 nextpage=false; 
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

pageNews.vue:

<template>
 <div class="page">
 <p>模拟ajax数据 1页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 <divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
 </div>
</template>
<script>
export default {
 name: 'pageNews',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"}
 ]
 allpage=1
 nextpage=false;
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

总结

以上所述是小编给大家介绍的Vue.js分页组件实现：diVuePagination的使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Vue.js分页组件实现：diVuePagination的使用详解

- Author -

透笔度_tbd

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解（17）
Dec 18 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 #Javascript
微信小程序实现图片上传功能实例（前端+PHP后端）
Jan 10 #Javascript
微信小程序实现传参数的几种方法示例
Jan 10 #Javascript
React中常见的动画实现的几种方式
Jan 10 #Javascript
使用async-validator编写Form组件的方法
Jan 10 #Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 #Javascript
JavaScript实现快速排序的方法分析
Jan 10 #Javascript
组策略(1) 伪静态(1) Windows server 2012(17) lamp(1) 跨域(4) Centos(8) destoon(1)  AD域(1) lnmp(1) Rewrite(4)
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP数组对比函数，存在交集则返回真，否则返回假
2011/02/03 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
全面解析Bootstrap中scrollspy（滚动监听）的使用方法
2016/06/06 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
vue数据控制视图源码解析
2018/03/28 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Python登录系统界面实现详解
2019/06/25 Python
Pandas分组与排序的实现
2019/07/23 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python的列表List求均值和中位数实例
2020/03/03 Python
简单了解python列表和元组的区别
2020/05/14 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
医学护理毕业生自荐信
2013/11/07 职场文书
网络工程师职业规划
2014/02/10 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
离职报告范文
2014/11/04 职场文书
护士自荐信怎么写
2015/03/06 职场文书
致创业的您：这类人不适合餐饮创业
2019/08/19 职场文书
Win11任务栏太宽了怎么办？一招解决Win11任务栏太宽问题
2021/11/21 数码科技