<template>
<div>
<div class="main-all">
<ul>
<li @click="changePage(currentPage-1)"><</li>
<li :class="currentPage === firstpage ? 'current':''" @click="changePage(firstpage)">{{firstpage}}</li>
<li :class="currentPage === firstpage+1 ? 'current':''" @click="changePage(firstpage+1)" v-if="dataPages > 1">{{firstpage+1}}</li>
<li :class="currentPage === firstpage+2 ? 'current':''" @click="changePage(firstpage+2)" v-if="dataPages > 2">{{firstpage+2}}</li>
<li :class="currentPage === firstpage+3 ? 'current':''" @click="changePage(firstpage+3)" v-if="dataPages > 3">{{firstpage+3}}</li>
<li :class="currentPage === firstpage+4 ? 'current':''" @click="changePage(firstpage+4)" v-if="dataPages > 4">{{firstpage+4}}</li>
<li @click="changePage(currentPage+5)" v-if="dataPages > 5 && firstpage+4 < dataPages-1 ">...</li>
<li :class="currentPage === dataPages ? 'current':''" @click="changePage(dataPages)" v-if="dataPages > 5">{{dataPages}}</li>
<li @click="changePage(toPage)" class="text-one">跳到</li>
<input v-model="toPage" @keyup.enter="changePage(toPage)" class="text-input" type="text">
<li class="text-two">页</li>
<li @click="changePage(currentPage+1)">></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "pagination",
props: {
//总页数
dataPages: {
type: Number,
default:21
},
//当前页
dataIndex: {
type: Number,
default:1
}
},
data () {
return {
firstpage:1,
currentPage:1,
toPage:1
}
},
mounted() {
this.currentPage = this.dataIndex
},
methods: {
changePage(page){
this.currentPage = page
if(page > this.firstpage+4){
this.firstpage = page-4
}
if(page < this.firstpage){
this.firstpage = page
}
if(page === this.dataPages){
this.firstpage = page-5
}
if(page > this.dataPages){
this.firstpage = this.dataPages-6
this.currentPage = this.dataPages
}
if(page < 1){
this.currentPage = 1
this.firstpage = 1
}
this.firstpage = parseInt(this.firstpage)
this.currentPage = parseInt(this.currentPage)
console.log(page)
console.log( this.firstpage)
console.log( this.currentPage)
}
}
}
</script>
<style scoped lang="scss">
.main-all{
ul{
li{
width: 30px;
height: 30px;
float: left;
background-color: #ffffff;
border: solid 1px #dcdcdc;
font-size: 16px;
line-height: 30px;
color: #666666;
text-align: center;
cursor: pointer;
}
.text-one{
width: 50px;
border: none;
}
.text-input{
float: left;
display: inline-block;
width: 30px;
height: 30px;
border: solid 1px #dcdcdc;
color: #666666;
}
.text-two{
border: none;
}
.current{
background-color: #e63452;
border: solid 1px #e63452;
color: #ffffff;
}
}
}
</style>
效果如图：
功能简介：点击“<”去到上1页
点击“>”去到下1页
点击“...”去到下5页
点击“跳到”去到输入页
输入框输入按"enter"去到输入页
