<template>
<div class="page-bar">
<ul>
<li v-if="cur>1">
<a v-on:click="cur--,pageClick()">上一页</a>
</li>
<li v-if="cur==1">
<a class="banclick">上一页</a>
</li>
<li v-for="index in indexs" :key="'index'+index" v-bind:class="{ 'active': cur == index}">
<a v-on:click="btnClick(index)">{{ index }}</a>
</li>
<li v-if="cur!=all">
<a v-on:click="cur++,pageClick()">下一页</a>
</li>
<li v-if="cur == all">
<a class="banclick">下一页</a>
</li>
<li>
<a>
共
<i>{{all}}</i>页
</a>
</li>
<li>
<a>
<input
class="skipPage"
type="number"
name="enterPage"
id="enterPage"
v-model="skipPage"
value
/>
</a>
</li>
<li>
<a @click="btnClick(skipPage)">跳转</a>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
all: 20, // 总页数
cur: 1, // 当前页码
skipPage: null // 页码页面
};
},
computed: {
indexs() {
var left = 1;
var right = this.all;
var ar = [];
if (this.all >= 5) {
if (this.cur > 3 && this.cur < this.all - 2) {
left = this.cur - 2;
right = this.cur + 2;
} else {
if (this.cur <= 3) {
left = 1;
right = 5;
} else {
right = this.all;
left = this.all - 4;
}
}
}
while (left <= right) {
ar.push(left);
left++;
}
while (left <= right && ar.length < 5) {
ar.push(left);
left++;
}
return ar;
}
},
watch: {
cur: function(oldValue, newValue) {
console.log(arguments);
}
},
methods: {
btnClick: function(data) {
if (data !== this.cur) {
// 点击每个页码的事件
this.cur = data;
} else if (data !== this.cur) {
// 点击跳转的页码的事件
// 跳转页码
if (data > this.all) {
this.skipPage = this.all;
}
if (data <= 1) {
data = 1;
this.skipPage = 1;
}
this.cur = data;
}
},
pageClick: function() {
console.log("现在在" + this.cur + "页");
}
}
};
</script>
<style>
.page-bar {
margin: 40px;
}
.skipPage {
width: 30px;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
ul,
li {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.page-bar li:first-child > a {
margin-left: 0px;
}
.page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;
}
.page-bar a:hover {
background-color: #eee;
}
.page-bar a.banclick {
cursor: not-allowed;
}
.page-bar .active a {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.page-bar i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}
</style>