填坑之路繼續(xù)哈~
首先來(lái)張圖，有圖有真相
pager.png
不喜就噴哈~
參數(shù)
分頁(yè)需要的字段：當(dāng)前頁(yè)(curPage)娶牌，每頁(yè)大小(pageSize)，總頁(yè)數(shù)(total)
作為一個(gè)組件，所以以上這些參數(shù)最好是從父組件傳遞過(guò)來(lái)迟几，可以如下定義：
...
props:[
"pageSize","curPage","total"
]
...
按鈕顯示
另外還需要用一些屬性控制按鈕的是否顯示，比如：當(dāng)前為第一頁(yè)時(shí)不顯示上一頁(yè)和首頁(yè)按鈕栏笆，當(dāng)前為最后一頁(yè)時(shí)不顯示下一頁(yè)和尾頁(yè)按鈕：
...
data () {
return {
...
"showFirstPage":true,
"showLastPage":true,
"showPrevPage":true,
"showNextPage":true,
...
}
}
...
頁(yè)面可以如下設(shè)置：
<a href="javascript:void(0);" v-show="showFirstPage">首頁(yè)</a>
<a href="javascript:void(0);" v-show="showPrevPage" >上一頁(yè)</a>
<a href="javascript:void(0);" v-show="showNextPage" >下一頁(yè)</a>
<a href="javascript:void(0);" v-show="showLastPage" >尾頁(yè)</a>
跳轉(zhuǎn)頁(yè)面大小
頁(yè)面大小不能用pageSize來(lái)控制类腮，需要重新綁定一個(gè)變量：
...
data () {
return {
...
"rowNum":this.pageSize
}
}
...
頁(yè)面部分可以這么寫：
<select v-model="rowNum">
<option value="10">10</option>
<option selected="selected" value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
顯示邏輯：
...
this.showFirstPage = this.curPage> 1
this.showLastPage = this.curPage< this.total
this.showPrevPage = this.curPage> 1
this.showNextPage = this.curPage< this.total
...
頁(yè)面跳轉(zhuǎn)
當(dāng)頁(yè)數(shù)太多時(shí)，頁(yè)面跳轉(zhuǎn)就必不可少了蛉加，可以使用<input>標(biāo)簽讓用戶輸入蚜枢，當(dāng)然需要驗(yàn)證輸入是否準(zhǔn)確，
首先需要的屬性不能少：
...
data () {
return {
"gotoPage":"",
...
}
}
...
頁(yè)面代碼：
<input type="text" v-model="gotoPage" />
<a href="javascript:void(0);" >跳轉(zhuǎn)</a>
還有针饥，使用前得做判斷：
...
if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){
...
}
...
唉厂抽，沒(méi)口水了。丁眼。筷凤。其實(shí)，說(shuō)了這么多户盯，就一句話：吾寫這份代碼不易嵌施，希汝珍惜對(duì)待 ^_^饲化。。吗伤。
好了吃靠，關(guān)門，放代碼：
代碼在此
template
<template>
<div class="pager">
<a href="javascript:void(0);" v-show="showFirstPage" v-on:click="firstPage" >首頁(yè)</a>
<a href="javascript:void(0);" v-show="showPrevPage" v-on:click="prevPage" >上一頁(yè)</a>
<a href="javascript:void(0);" v-show="showNextPage" v-on:click="nextPage" >下一頁(yè)</a>
<a href="javascript:void(0);" v-show="showLastPage" v-on:click="lastPage" >尾頁(yè)</a>
<div>
<select v-model="rowNum">
<option value="10">10</option>
<option selected="selected" value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<span>{{curPage}}/{{total}}</span>
<div class="goto">
<input type="text" v-model="gotoPage" />
<a href="javascript:void(0);" v-on:click="gotoNextPage" >跳轉(zhuǎn)</a>
</div>
</div>
</template>
script
<script>
export default {
mounted() {
this.$nextTick(() => { this.initPager() }) //需要延遲初始化
},
name: 'Pager',
data () {
return {
"gotoPage":"",
"showFirstPage":true,
"showLastPage":true,
"showPrevPage":true,
"showNextPage":true,
"rowNum":this.pageSize
}
},
methods:{
nextPage(){//下一頁(yè)
this.$emit('setPage', this.curPage+ 1 ) //調(diào)用父組件方法
},
prevPage(){//上一頁(yè)
this.$emit('setPage', this.curPage- 1 ) //調(diào)用父組件方法
},
gotoNextPage(){//跳轉(zhuǎn)頁(yè)面
if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){
var pg = parseInt(this.gotoPage)
if(pg > 0 && pg <= this.pageSize){
this.$emit('setPage', pg ) //調(diào)用父組件方法
}else{
this.gotoPage = ""
}
}else{
this.gotoPage = ""
}
},
firstPage(){
this.$emit('setPage', 1 ) //調(diào)用父組件方法
},
lastPage(){
this.$emit('setPage', this.total ) //調(diào)用父組件方法
},
rowNumChanged(){
this.$emit('setRowNum', this.rowNum )
},
initPager(){
this.showFirstPage = this.curPage> 1
this.showLastPage = this.curPage< this.total
this.showPrevPage = this.curPage> 1
this.showNextPage = this.curPage< this.total
this.gotoPage = ""
}
},
props:[
"pageSize","curPage","total"
],
watch:{
'rowNum':'rowNumChanged' //監(jiān)控rowNum
}
}
</script>
css
<style>
.pager>span,.pager>a,.pager>select,.pager>div{
float: left;
margin-left: 10px;
}
.pager{
width: 600px;
margin: 0 auto;
margin-top: 10px;
height: 48px;
line-height: 48px;
margin-bottom: 40px;
}
.pager input,.pager select{
height:40px;
line-height:40px;
outline:none;
border:1px solid #888;
padding:10px;
box-sizing:border-box;
}
.pager input{
width: 50px;
}
.pager .goto{
margin-left: 20px;
}
.pager a{
color: black;
font-weight: bold;
text-decoration: none;
}
.pager a:hover{
color: green;
}
</style>
好了足淆，以上就是組件的全部代碼
那么父組件該如何調(diào)用呢巢块？嘿嘿
分頁(yè)組件的調(diào)用
template
<template>
...
<Pager
v-if="!dataChanged"
ref="pager"
:pageSize="pageSize"
:page="curPage"
:total="total"
@setPage="gotoPage"
@setRowNum="changeRowNum" />
...
</template>
其中dataChanged用來(lái)刷新組件的，參考：vue強(qiáng)制刷新組件
其中setPage和setRowNum分別對(duì)應(yīng)父組件的方法：gotoPage巧号，changeRowNum族奢，參考：vue2.0父子組件以及非父子組件如何通信
script
import Pager from '@/components/Pager'
...
export default{
...
data(){
return {
curPage:1,//當(dāng)前頁(yè)
total:0,//總共頁(yè)數(shù)
pageSize:20,//每頁(yè)記錄數(shù)
dataChanged:false
}
},
components:{
"Pager":Pager
}
methods:{
refresh(){//用于刷新組件，需手動(dòng)調(diào)用
this.dataChanged = true
this.$nextTick(() => {
this.dataChanged = false
})
},
gotoPage(page){
...
},
changeRowNum(pageSize){
...
}
}
...
}
好了丹鸿，真的完了~
