vue實現一個分頁元件
阿新 • • 發佈:2019-01-08
Vue.component("page",{
template:"#page",
data:function(){
return{
current:1,
showItem:5,
allpage:13
}
},
computed:{
pages:function(){
var pag = [];
if( this.current < this .showItem ){ //如果當前的啟用的項 小於要顯示的條數
//總頁數和要顯示的條數那個大就顯示多少條
var i = Math.min(this.showItem,this.allpage);
while(i){
pag.unshift(i--);
}
}else{ //當前頁數大於顯示頁數了
var middle = this.current - Math.floor(this.showItem / 2 ),//從哪裡開始
i = this.showItem;
if( middle > (this.allpage - this.showItem) ){
middle = (this.allpage - this.showItem) + 1
}
while (i--){
pag.push( middle++ );
}
}
return pag
}
},
methods:{
goto:function(index){
if(index == this.current) return;
this.current = index;
//這裡可以傳送ajax請求
}
}
})
var vm = new Vue({
el:'#app',
})