今天記錄用vuejs2來寫一個分頁組件
有些註解定義我說的並不是很準確，主要是方便自己理解寫的，請大家包涵 ...
代碼的github網址 : https://github.com/fengliting/vue-page，裏面給了詳細的註解和補充一些方法
頁面的html
<!-- 分頁 -->
<m-page @on-bottompage="bottompage"></m-page>
//定義組件
Vue.component("m-page",{
//定義初始化的一些數據
data:function(){
return {
inputppage:'',
pagenums:10,
cur:1,
}
},
//拿到父組件傳過來的值
props:['bottompage'],
//模板html，會顯示到html
template:`
<div class="Activepage">
<div class="row">
<div class="col-sm-6">
<ul class="pagination" v-cloak>
<li :class="{'disabled':cur == 1}"><a @click="cur--,pageclick()" >‹</a></li>
<li :class="{'active':cur == index}" v-for="index in indexs"><a @click="btnclick(index,$event)">{{index}}</a></li>
<li :class="{'disabled':cur == pagenums}"><a @click="cur++,pageclick()" >›</a></li>
</ul>
</div>
<div class="col-sm-6 page-confirm">
共 {{pagenums}} 頁 到第 <input type="text" name="page_id" class="no-width-form-control text-center" v-model="inputpage" size="1"> 頁\
<button type="button" class="btn btn-primary" @click="pagesubmit($event)">確定</button>
</div>
</div>
</div>
`，
//事件處理器，定義方法都寫這裏
methods:{
pagesubmit:function(){
this.$emit("on-bottompage", this.inputpage);
this.cur = this.inputpage
},
btnclick:function(){
this.$emit("on-bottompage",index);
if(index!=this.cur){
this.cur = index}
},
pageclick:function(){
this.$emit("on-bottompage",this.cur)
}
},
//計算屬性
computed:{
indexs:function(){
var left = 1;
var right = this.pagenums;
var arr = [];
// 展示底部的分頁一直有5個
if (this.pagenums >= 5) {
if (this.cur > 3 && this.cur < this.pagenums - 2) {
//這裏有個坑，一定要記得轉化爲parseInt
left = parseInt(this.cur) - 2
right = parseInt(this.cur) + 2
} else {
if (this.cur <= 3) {
left = 1
right = 5
} else {
right = this.pagenums
left = this.pagenums - 4
}
}
}
while (left <= right) {
arr.push(left)
left++
}
// console.log(arr)
return arr
}
},
})
//實例接收子組件的方法
new Vue({
el:'#page',
data:{
},
methods:{
bottompage:function(inputpage){
console.log('向父集傳送當前頁碼'+inputpage)
}
}
})
代碼的github網址 : https://github.com/fengliting/vue-page，裏面給了詳細的註解和補充一些方法，如果喜歡給顆星星吧