用vuejs寫一個分頁元件
阿新 • • 發佈：2019-01-10
今天記錄用vuejs2來寫一個分頁元件
有些註解定義我說的並不是很準確，主要是方便自己理解寫的，請大家包涵 ...
程式碼的github網址 : https://github.com/fengliting/vue-page，裡面給了詳細的註解和補充一些方法
頁面的html
<!-- 分頁 --><m-page @on-bottompage="bottompage"></m-page>解釋：@on-bottompage="bottompage"：點選提交分頁的方法，這個也是繫結到vm例項裡面的方法，相當於子元件傳資訊給到父元件，如果解釋看不是很懂，等會看程式碼//定義元件
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>`，
//事件處理器，定義方法都寫這裡
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) {//這裡有個坑，一定要記得轉化為parseIntleft = parseInt(this.cur) - 2right = parseInt(this.cur) + 2} else {if (this.cur <= 3) {left = 1right = 5} else {right = this.pagenumsleft = 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，裡面給了詳細的註解和補充一些方法，如果喜歡給顆星星吧