【技术】使用 VUE.JS 制作
【效果】
- 实现页码跳转,根据组件 props 参数获取 pager 的页码总数和当前页码。
- 当页码过多时,显示首尾页码以及当前页码及当前页码左右页码。
- 首尾可点击进入上一页或下一页
【代码】
<template>
<div>
<div class="pager-wrapper" v-if="pageNum < 6">
<img src="../../assets/images/Path 3 Copy.png" alt="prev" class="img-prev img" @click="prev">
<div v-for="(item, index) in pages" class="item" :class='{active : active === (index + 1)}' @click="changePage(item)">{{item}}</div>
<img src="../../assets/images/Path 3 Copy.png" alt="next" class="img-next img" @click="next">
</div>
<div v-else>
<div class="pager-wrapper" v-if="active < 4">
<img src="../../assets/images/Path 3 Copy.png" alt="prev" class="img-prev img" @click="prev">
<div v-for="(item, index) in pages" class="item" :class='{active : active === (index + 1)}' @click="changePage(item)">{{item}}</div>
<div class="point">...</div>
<div class="item" @click="end">{{pageNum}}</div>
<img src="../../assets/images/Path 3 Copy.png" alt="next" class="img-next img" @click="next">
</div>
<div class="pager-wrapper" v-else-if="active < (pageNum - 2)">
<img src="../../assets/images/Path 3 Copy.png" alt="prev" class="img-prev img" @click="prev">
<div class="item" @click="start">1</div>
<div class="point">...</div>
<div v-for="(item, index) in pages" class="item" :class='{active : active === item}' @click="changePage(item)">{{item}}</div>
<div class="point">...</div>
<div class="item" @click="end">{{pageNum}}</div>
<img src="../../assets/images/Path 3 Copy.png" alt="next" class="img-next img" @click="next">
</div>
<div class="pager-wrapper" v-else>
<img src="../../assets/images/Path 3 Copy.png" alt="prev" class="img-prev img" @click="prev">
<div class="item" @click="start">1</div>
<div class="point">...</div>
<div v-for="(item, index) in pages" class="item" :class='{active : active === item}' @click="changePage(item)">{{item}}</div>
<img src="../../assets/images/Path 3 Copy.png" alt="next" class="img-next img" @click="next">
</div>
</div>
</div>
</template>
<script>
export default {
props: {
pageNum: {
type: Number,
default: 1
},
activeIndex: {
type: Number,
default: 1
}
},
data () {
return {
pages: [],
active: 1
}
},
watch: {
active (val) {
this.init()
}
},
created () {
this.active = this.activeIndex
this.init()
},
methods: {
init () {
if (this.pageNum < 6) {
let pages = []
for (let i = 1; i < (this.pageNum + 1); i++) {
pages.push(i)
}
this.pages = pages
} else {
if (this.active < 4) {
let pages = [1, 2, 3]
this.pages = pages
console.log(this.pages)
} else if (this.active < (this.pageNum - 2)) {
let pages = [this.active - 1, this.active, this.active + 1]
this.pages = pages
} else {
let pages = [this.pageNum - 2, this.pageNum - 1, this.pageNum]
this.pages = pages
}
}
},
changePage (item) {
this.active = item
this.$emit('changePage', item)
},
start () {
this.active = 1
this.$emit('changePage', this.active)
},
end () {
this.active = this.pageNum
this.$emit('changePage', this.active)
},
prev () {
if (this.active === 1) return
this.active--
this.$emit('changePage', this.active)
},
next () {
if (this.active === this.pageNum) return
this.active++
this.$emit('changePage', this.active)
}
}
}
</script>
<style scoped>
.pager-wrapper{
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.img{
width: 9px;
height: 20px;
cursor: pointer;
}
.img-next{
transform: rotate(180deg);
margin-left: 32px;
}
.img-prev{
margin-right: 16px;
}
.item{
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
font-size: 16px;
padding: 4px 20px;
border: 1px solid #d7d7d7;
margin-left: 16px;
cursor: pointer;
color: #a5a5a5;
}
.active{
background: #a5a5a5;
color: #fff;
border: 1px solid #a5a5a5;
}
.point{
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
margin-left: 16px;
letter-spacing: 3px;
color: #a5a5a5;
}
</style>
【效果】