<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-router</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js" ></script>
<style>
body{
font-family:"Segoe UI";
}
li{
list-style:none;
}
a{
text-decoration:none;
}
.pagination {
position: relative;
}
.pagination li{
display: inline-block;
margin:0 5px;
padding:6px 12px;
display:inline-block;
border:1px solid #ddd;
background:#fff;
color:#0E90D2;
}
.pagination li a{
}
.pagination li:hover{
background:#eee; cursor:pointer;
}
.pagination li.active{
background:#0E90D2;
color:#fff;
}
li.disabled{color:#dcdcdc;}
li.disabled:hover{background:#fff;}
</style>
</head>
<body>
<template id="page">
<ul class="pagination" >
<li :class="{disabled: current == 1}" @click="decre" v-if="allpage > 1">上一頁</li>
<li :class="{active: current == 1}" @click="goto(1)">1</li>
<li class="ellipsis" v-show="current >= showItem && bigLimit > 10">...</li>
<li :class="{active: current == index+offset}" v-for="(item,index) in middlePages" @click="goto(index+offset)">{{index+offset}}</li>
<li class="ellipsis" v-show="current < bigLimit && bigLimit > 10">...</li>
<li :class="{active: current == allpage}" @click="goto(allpage)" v-if="allpage > 1">{{allpage}}</li>
<li :class="{disabled: current == allpage}" @click="incre" v-if="allpage > 1">下一頁</li>
</ul>
</template>
<div id="app">
<page></page>
</div>
<script>
Vue.component("page",{
template:"#page",
data(){
return{
current:1, //當前頁碼
showItem:11, //顯示頁碼 6 -1
allpage:30, //總頁數 當頁碼不大於10，無省略號
preCli:false,
backCli:true
}
},
computed:{
middlePages(){
if(this.allpage <= 2){
return 0;
}else{
return this.showItem - 1;
}
},
bigLimit(){
if(this.middlePages%2 == 0){
console.log(this.middlePages);
return this.allpage - (this.middlePages/2 + 1);
}else{
return this.allpage-Math.ceil(this.middlePages/2);
}
},
offset(){
if(this.current <= this.middlePages){
return 2;
}else if(this.current >= this.bigLimit){
if(this.middlePages%2 == 0){
console.log(this.middlePages);
return this.bigLimit - (this.middlePages/2 - 1);
}else{
return this.bigLimit - Math.floor(this.middlePages/2);
}
}else{
// return this.current-Math.path(this.middlePages/2);
if(this.middlePages%2 == 0){
console.log(this.middlePages);
return this.current-(this.middlePages/2 - 1);
}else{
return this.current-Math.floor(this.middlePages/2);
}
}
}
},
methods:{
goto:function(index){
// console.log(index);
// console.log(this.current);
if(index == this.current) return;
this.current = index;
//這裏可以發送ajax請求
},
decre:function(){
// console.log('decre'+this.current)
if(this.current != 1){
this.current--;
// console.log(this.current)
}
},
incre:function(){
if( this.current != this.allpage){
this.current++;
}
}
}
})
var vm = new Vue({
el:'#app',
})
</script>
</body>
</html>vue簡單分頁組件
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
下拉樹組件
<!-- 樹狀選擇器 --> <template> <el-popover ref="popover" placement="bottom-start" trigger="click" @sho
基於vue-pdf的PDF預覽，縮放、旋轉、拖拽、下一頁
先說一下利用iframe打開pdf效果如下 代碼如下這種感覺更簡單，打印各方面都可以 <el-dialog v-if="showPdf" :visible.sync="showPdf" wi