Vue.js分頁(yè)組件實(shí)現(xiàn)：diVuePagination的使用詳解
更新時(shí)間：2018年01月10日 11:18:55 作者：透筆度_tbd
這篇文章主要介紹了Vue.js分頁(yè)組件實(shí)現(xiàn)：diVuePagination的使用詳解,需要的朋友可以參考下
一.介紹
Vue.js 是什么
Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。
二.創(chuàng)建初始化項(xiàng)目
這里不在詳細(xì)說明，我們的分頁(yè)演示只需要vue和vue-router就可以了，我們直接構(gòu)建項(xiàng)目和設(shè)置配置。
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 // （縮寫）相當(dāng)于 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: '分頁(yè)組件：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數(shù)據(jù) 1-7頁(yè)</p>
<ul class="ull">
<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{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數(shù)據(jù) 1-7頁(yè)
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(){
//模擬生成第一頁(yè)數(shù)據(jù)
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數(shù)據(jù) 1-3頁(yè)</p>
<ul class="ull">
<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{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數(shù)據(jù) 1-3頁(yè)
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(){
//模擬生成第一頁(yè)數(shù)據(jù)
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數(shù)據(jù) 1頁(yè)</p>
<ul class="ull">
<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{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數(shù)據(jù) 1頁(yè)
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(){
//模擬生成第一頁(yè)數(shù)據(jù)
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>
預(yù)覽效果：
三.分頁(yè)靜態(tài)結(jié)構(gòu)和樣式
divuePage.vue:
<template>
<div class="DiReactPage">
<div class="DiReactPage-btn">第一頁(yè)</div>
<div class="DiReactPage-btn disable">上一頁(yè)</div>
<div class="DiReactPage-page">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="DiReactPage-btn">下一頁(yè)</div>
<div class="DiReactPage-btn">最后一頁(yè)</div>
<div class="DiReactPage-btn">總4頁(yè)</div>
<input class="DiReactPage-input" type="text" />
<button class="DiReactPage-btn">跳轉(zhuǎn)</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注冊(cè)：
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'
//注冊(cè)組件
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 // （縮寫）相當(dāng)于 routes: routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
pageHome.vue引用：
<template>
<div class="page">
<p>//模擬ajax數(shù)據(jù) 1-7頁(yè)</p>
<ul class="ull">
<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{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數(shù)據(jù) 1-7頁(yè)
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(){
//模擬生成第一頁(yè)數(shù)據(jù)
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>
效果預(yù)覽：
四.分頁(yè)組件實(shí)現(xiàn)邏輯分析
我們分析一下如何實(shí)現(xiàn)我們的分頁(yè)組件：
從分頁(yè)組件考慮：
分頁(yè)組件需要顯示頁(yè)數(shù)，那么就需要傳遞給分頁(yè)組件總用多少頁(yè)這個(gè)狀態(tài)，
上一頁(yè)和下一頁(yè)存在不可用狀態(tài)，在第一頁(yè)上一頁(yè)不可用，所以要把當(dāng)前所在頁(yè)數(shù)傳遞，同樣頁(yè)數(shù)的焦點(diǎn)位置也需要它判斷，
然后就是方法，我們頁(yè)數(shù)和按鈕的點(diǎn)擊都是發(fā)起請(qǐng)求，攜帶的參數(shù)就是當(dāng)前點(diǎn)擊的頁(yè)數(shù)，
1.總頁(yè)數(shù)，當(dāng)前所在頁(yè)，可在父組件傳遞進(jìn)入
2.發(fā)起請(qǐng)求的方法可以通過組件交互通信實(shí)現(xiàn)
1的數(shù)據(jù)都是接口會(huì)返回給我們的，我們直接以屬性傳遞即可：
2的實(shí)現(xiàn)也很簡(jiǎn)單，我們其實(shí)已經(jīng)處理模擬使用過了：
我們只需要自定義事件，讓分頁(yè)組件$emit即可：
pageHome.vue:
<template>
<div class="page">
<p>//模擬ajax數(shù)據(jù) 1-7頁(yè)</p>
<ul class="ull">
<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{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數(shù)據(jù) 1-7頁(yè)
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(){
//模擬生成第一頁(yè)數(shù)據(jù)
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>
五.分頁(yè)組件邏輯編寫
divuePage.vue我們接受了這些傳遞的內(nèi)容，總頁(yè)數(shù)和當(dāng)前所在頁(yè)，然后點(diǎn)擊第一頁(yè)觸發(fā)自定義事件，傳遞給父組件一個(gè)1，獲取第一頁(yè)數(shù)據(jù)：
<template>
<div class="DiReactPage">
<div class="DiReactPage-btn" v-on:click="clickFirst">第一頁(yè)</div>
<div class="DiReactPage-btn disable">上一頁(yè)</div>
<div class="DiReactPage-page">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="DiReactPage-btn">下一頁(yè)</div>
<div class="DiReactPage-btn">最后一頁(yè)</div>
<div class="DiReactPage-btn">總4頁(yè)</div>
<input class="DiReactPage-input" type="text" />
<button class="DiReactPage-btn">跳轉(zhuǎn)</button>
</div>
</template>
<script>
export default {
name: 'divuePage',
props:["currentpage","allpage"],
methods:{
clickFirst:function(){//點(diǎn)擊第一頁(yè)
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.頁(yè)數(shù)顯示
我們的首要工作就是把頁(yè)數(shù)顯示出來，我們已經(jīng)接收了總頁(yè)數(shù)，其實(shí)這個(gè)問題很容易解決，我們?cè)O(shè)置一個(gè)計(jì)算屬性，屬性依據(jù)總頁(yè)數(shù)生成一個(gè)數(shù)組，從1到n即可：
顯示：
這樣還不夠健壯，還有一個(gè)就是總頁(yè)數(shù)5做分界線，大于5就顯示當(dāng)前到后4個(gè)，
比如在第3頁(yè)，顯示：3 4 5 6 7
第2頁(yè)，顯示：2 3 4 5 6
好了我們加入一些小的邏輯判斷：
我們要給當(dāng)前頁(yè)加一個(gè)類名標(biāo)識(shí)，已經(jīng)獲取當(dāng)前的頁(yè)數(shù)了，我們加一個(gè)判斷就可以了，在v-for中：
我們?cè)诩尤朦c(diǎn)擊事件，拿到點(diǎn)擊的item就是要請(qǐng)求后臺(tái)數(shù)據(jù)的參數(shù)page:
定義這個(gè)方法：
完整代碼：
<template>
<div class="DiReactPage">
<div class="DiReactPage-btn" v-on:click="clickFirst">第一頁(yè)</div>
<div class="DiReactPage-btn disable">上一頁(yè)</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">下一頁(yè)</div>
<div class="DiReactPage-btn">最后一頁(yè)</div>
<div class="DiReactPage-btn">總4頁(yè)</div>
<input class="DiReactPage-input" type="text" />
<button class="DiReactPage-btn">跳轉(zhuǎn)</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(){//點(diǎn)擊第一頁(yè)
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>
效果測(cè)試：
2.第一頁(yè)和最后一頁(yè)處理
這個(gè)很簡(jiǎn)單，只是傳遞page參數(shù)，我們已經(jīng)獲取總頁(yè)數(shù)，直接設(shè)置即可！
3.上一頁(yè)和下一頁(yè)處理
這個(gè)對(duì)比第一頁(yè)需要加入特殊的處理，當(dāng)前是第一頁(yè)，這個(gè)按鈕就不可用狀態(tài)，下一頁(yè)一樣的邏輯判斷當(dāng)前是不是在最后一頁(yè)：
調(diào)用位置加入事件，在加一個(gè)是否可用的類名：
全部代碼：
<template>
<div class="DiReactPage">
<div class="DiReactPage-btn" v-on:click="clickFirst">第一頁(yè)</div>
<div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一頁(yè)</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}">下一頁(yè)</div>
<div class="DiReactPage-btn" v-on:click="clickLast">最后一頁(yè)</div>
<div class="DiReactPage-btn">總4頁(yè)</div>
<input class="DiReactPage-input" type="text" />
<button class="DiReactPage-btn">跳轉(zhuǎn)</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(){//點(diǎn)擊第一頁(yè)
this.$emit("getajaxlist",1);
},
clickCurrent:function(item){
this.$emit("getajaxlist",item);
},
clickLast:function(){//點(diǎn)擊最后一頁(yè)
this.$emit("getajaxlist",this.allpage);
},
clickPrev:function(){//點(diǎn)擊上一頁(yè)
if(this.currentpage-1<1){
return false;
}
this.$emit("getajaxlist",this.currentpage-1);
},
clickNext:function(){//點(diǎn)擊下一頁(yè)
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>
效果測(cè)試：
4.跳頁(yè)處理
這個(gè)我們獲取輸入框的值，直接調(diào)用，不過對(duì)輸入的內(nèi)容必須有一些判斷限制：
加一個(gè)data:
使用位置：
5.顯示總頁(yè)數(shù)
這個(gè)是最簡(jiǎn)單的：
六.分頁(yè)全部代碼和測(cè)試
divuePage.vue:
<template>
<div class="DiReactPage">
<div class="DiReactPage-btn" v-on:click="clickFirst">第一頁(yè)</div>
<div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一頁(yè)</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}">下一頁(yè)</div>
<div class="DiReactPage-btn" v-on:click="clickLast">最后一頁(yè)</div>
<div class="DiReactPage-btn">總{{allpage}}頁(yè)</div>
<input class="DiReactPage-input" type="text" v-model="skipvalue" />
<button class="DiReactPage-btn" v-on:click="clickSkip">跳轉(zhuǎn)</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(){//點(diǎn)擊第一頁(yè)
this.$emit("getajaxlist",1);
},
clickCurrent:function(item){
this.$emit("getajaxlist",item);
},
clickLast:function(){//點(diǎn)擊最后一頁(yè)
this.$emit("getajaxlist",this.allpage);
},
clickPrev:function(){//點(diǎn)擊上一頁(yè)
if(this.currentpage-1<1){
return false;
}
this.$emit("getajaxlist",this.currentpage-1);
},
clickNext:function(){//點(diǎn)擊下一頁(yè)
if(this.currentpage+1>this.allpage){
return false;
}
this.$emit("getajaxlist",this.currentpage+1);
},
clickSkip:function(){//點(diǎn)擊下一頁(yè)
if(isNaN(this.skipvalue)){
console.log("必須是數(shù)字")
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>
我們現(xiàn)在在pageHome.vue做了使用，這個(gè)模擬數(shù)據(jù)包含7頁(yè)，我們?cè)诹硗鈨蓚€(gè)組件也使用分頁(yè)組件，測(cè)試小于5頁(yè)和只有1頁(yè)的效果：
<divue-page v-bind:currentpage="currentpage" v-bind:allpage="allpage" v-on:getajaxlist="getajaxlist"></divue-page>
直接粘貼就可以在另外的組件使用。
只有1頁(yè)：
小于5頁(yè)：
測(cè)試沒有太大問題！
七.優(yōu)化和改進(jìn)建議
當(dāng)然不是樣式的優(yōu)化，這個(gè)需要設(shè)計(jì)的參與，我們還是顯示的優(yōu)化和改進(jìn)，比如：
我們是不是該有一個(gè)...
還有就是...
可以參考別的分頁(yè)效果，然后你可以不斷的改進(jìn)！
八.完整代碼
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'
//注冊(cè)組件
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 // （縮寫）相當(dāng)于 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: '分頁(yè)組件：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">第一頁(yè)</div>
<div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一頁(yè)</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}">下一頁(yè)</div>
<div class="DiReactPage-btn" v-on:click="clickLast">最后一頁(yè)</div>
<div class="DiReactPage-btn">總{{allpage}}頁(yè)</div>
<input class="DiReactPage-input" type="text" v-model="skipvalue" />
<button class="DiReactPage-btn" v-on:click="clickSkip">跳轉(zhuǎn)</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(){//點(diǎn)擊第一頁(yè)
this.$emit("getajaxlist",1);
},
clickCurrent:function(item){
this.$emit("getajaxlist",item);
},
clickLast:function(){//點(diǎn)擊最后一頁(yè)
this.$emit("getajaxlist",this.allpage);
},
clickPrev:function(){//點(diǎn)擊上一頁(yè)
if(this.currentpage-1<1){
return false;
}
this.$emit("getajaxlist",this.currentpage-1);
},
clickNext:function(){//點(diǎn)擊下一頁(yè)
if(this.currentpage+1>this.allpage){
return false;
}
this.$emit("getajaxlist",this.currentpage+1);
},
clickSkip:function(){//點(diǎn)擊下一頁(yè)
if(isNaN(this.skipvalue)){
console.log("必須是數(shù)字")
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數(shù)據(jù) 1-7頁(yè)</p>
<ul class="ull">
<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{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數(shù)據(jù) 1-7頁(yè)
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(){
//模擬生成第一頁(yè)數(shù)據(jù)
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數(shù)據(jù) 1-3頁(yè)</p>
<ul class="ull">
<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{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數(shù)據(jù) 1-3頁(yè)
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(){
//模擬生成第一頁(yè)數(shù)據(jù)
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數(shù)據(jù) 1頁(yè)</p>
<ul class="ull">
<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">內(nèi)容：{{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數(shù)據(jù) 1頁(yè)
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(){
//模擬生成第一頁(yè)數(shù)據(jù)
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>
總結(jié)
以上所述是小編給大家介紹的Vue.js分頁(yè)組件實(shí)現(xiàn)：diVuePagination的使用詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽數(shù)據(jù)傳遞的方法
- angularjs使用directive實(shí)現(xiàn)分頁(yè)組件的示例
- Reactjs實(shí)現(xiàn)通用分頁(yè)組件的實(shí)例代碼
- 原生js編寫基于面向?qū)ο蟮姆猪?yè)組件
- Vue.js實(shí)現(xiàn)一個(gè)自定義分頁(yè)組件vue-paginaiton
- 使用vue.js制作分頁(yè)組件
- 基于Vue.js的表格分頁(yè)組件
- js多功能分頁(yè)組件layPage使用方法詳解
- 分享一個(gè)自己寫的簡(jiǎn)單的javascript分頁(yè)組件
- JavaScript分頁(yè)組件使用方法詳解
相關(guān)文章
Vue+axios 實(shí)現(xiàn)http攔截及路由攔截實(shí)例
這篇文章主要介紹了Vue+axios 實(shí)現(xiàn)http攔截及路由攔截 ,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Vue 集成 PDF.js 實(shí)現(xiàn) PDF 預(yù)覽和添加水印的步驟
這篇文章主要介紹了如何在 Vue 中集成 Mozilla/PDF.js ，實(shí)現(xiàn)自定義的 PDF 預(yù)覽器，以及給被預(yù)覽的 PDF 添加水印2021-01-01
詳解刷新頁(yè)面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁(yè)面的解決
這篇文章主要介紹了詳解刷新頁(yè)面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁(yè)面的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
在vant 中使用cell組件 定義圖標(biāo)該圖片和位置操作
這篇文章主要介紹了在vant 中使用cell組件 定義圖標(biāo)該圖片和位置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue的props實(shí)現(xiàn)子組件隨父組件一起變化
這篇文章主要為大家詳細(xì)介紹了vue的props如何實(shí)現(xiàn)子組件隨父組件一起變化,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)用戶登錄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
解決Vue項(xiàng)目Network:?unavailable的問題
項(xiàng)目只能通過Local訪問而不能通過Network訪問,本文主要介紹了解決Vue項(xiàng)目Network:?unavailable的問題,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
在Vue中，computed屬性是一種計(jì)算屬性，它的值是根據(jù)其他數(shù)據(jù)的值動(dòng)態(tài)計(jì)算出來的，下面小編主要來和大家聊聊Vue 3的組合式API中如何使用computed屬性，感興趣的小伙伴快跟隨小編一起了解一下吧2023-06-06
element-plus結(jié)合sortablejs實(shí)現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實(shí)現(xiàn)table行拖動(dòng)排序,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手試一試2023-10-10
Vue中登錄驗(yàn)證成功后保存token,并每次請(qǐng)求攜帶并驗(yàn)證token操作
這篇文章主要介紹了Vue中登錄驗(yàn)證成功后保存token,并每次請(qǐng)求攜帶并驗(yàn)證token操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09