Vue分頁器組件使用方法詳解
本文實例為大傢分享瞭Vue分頁器組件的使用，供大傢參考，具體內容如下
效果圖如下：
鼠標懸浮時切換為箭頭：
①創建自定義分頁組件Pager.vue：預設主題色為@themeColor: #D93844; 每頁展示10條數據，一次最多顯示5個頁碼，支持輸入頁碼跳轉：
<template>
<div class="m-pager-wrap" v-if="totalCount">
<span class="u-text">共{{ totalPage }}頁 / {{ totalCount }}條</span>
<span class="u-item txt" :class="{'disabled': currentPage===1}" @click="changePage(1)">首頁</span>
<span class="u-item txt" :class="{'disabled': currentPage===1}" @click="changePage(currentPage - 1)">上一頁</span>
<span
class="u-ellipsis"
ref="forward"
v-show="forwardMore"
@click="onForward"
@mouseenter="onEnterForward"
@mouseleave="onLeaveForward">···</span>
<span :class="['u-item', {'active': currentPage===num}]" v-for="num in pageList" :key="num" @click="changePage(num)">{{ num }}</span>
<span
class="u-ellipsis"
ref="backward"
v-show="backwardMore"
@click="onBackward"
@mouseenter="onEnterBackward"
@mouseleave="onLeaveBackward">···</span>
<span class="u-item txt" :class="{'disabled': currentPage===totalPage}" @click="changePage(currentPage + 1)">下一頁</span>
<span class="u-item txt" :class="{'disabled': currentPage===totalPage}" @click="changePage(totalPage)">尾頁</span>
<span class="u-jump-page">跳至<input type="text" v-model="jumpNumber"/>頁</span>
<span class="u-item txt" @click="jumpPage(jumpNumber)">確定</span>
</div>
</template>
<script>
export default {
name: 'Pager',
data () {
return {
currentPage: this.pageNumber, // 當前頁碼
currentSize: this.pageSize, // 分頁數
jumpNumber: '', // 跳轉的頁碼
forwardMore: false, // 左箭頭展示
backwardMore: false // 右箭頭展示
}
},
props: {
pageNumber: { // 當前頁面
type: Number,
default: 1
},
pageSize: { // 每頁顯示數量 [10條/頁 20條/頁 30條/頁 40條/頁]
type: Number,
default: 10
},
totalCount: { // 總條數
type: Number,
default: 0
},
pageListNum: { // 顯示的頁碼數組長度
type: Number,
default: 5
}
},
computed: {
totalPage () { // 總頁數
return Math.ceil(this.totalCount / this.currentSize) // 向上取整
},
pageList () { // 獲取顯示的頁碼數組
return this.dealPageList(this.currentPage)
}
},
watch: {
currentPage (to, from) {
// 通過更改當前頁碼，修改分頁數據
this.$emit('changePage', { currentPage: to, currentSize: this.currentSize })
}
},
created () {
// 監聽鍵盤Enter按鍵
document.onkeydown = (e) => {
const ev = e || window.event
if (ev && ev.keyCode === 13 && this.jumpNumber) {
this.jumpPage(this.jumpNumber)
}
}
},
methods: {
dealPageList (curPage) {
var resList = []
var offset = Math.floor(this.pageListNum / 2) // 向下取整
var pager = {
start: curPage - offset,
end: curPage + offset
}
if (pager.start < 1) {
pager.end = pager.end + (1 - pager.start)
pager.start = 1
}
if (pager.end > this.totalPage) {
pager.start = pager.start - (pager.end - this.totalPage)
pager.end = this.totalPage
}
if (pager.start < 1) {
pager.start = 1
}
if (pager.start > 1) {
this.forwardMore = true
} else {
this.forwardMore = false
}
if (pager.end < this.totalPage) {
this.backwardMore = true
} else {
this.backwardMore = false
}
// 生成要顯示的頁碼數組
for (let i = pager.start; i <= pager.end; i++) {
resList.push(i)
}
return resList
},
onEnterForward () {
this.$refs.forward.innerHTML = '«'
},
onLeaveForward () {
this.$refs.forward.innerHTML = '···'
},
onEnterBackward () {
this.$refs.backward.innerHTML = '»'
},
onLeaveBackward () {
this.$refs.backward.innerHTML = '···'
},
onForward () {
this.currentPage = this.currentPage - this.pageListNum > 0 ? this.currentPage - this.pageListNum : 1
},
onBackward () {
this.currentPage = this.currentPage + this.pageListNum < this.totalPage ? this.currentPage + this.pageListNum : this.totalPage
},
jumpPage (jumpNum) {
if (Number(jumpNum)) {
if (Number(jumpNum) < 1) {
jumpNum = 1
}
if (Number(jumpNum) > this.totalPage) {
jumpNum = this.totalPage
}
this.changePage(Number(jumpNum))
}
this.jumpNumber = '' // 清空跳轉輸入框
},
changePage (pageNum) {
if (this.currentPage !== pageNum) { // 點擊的頁碼不是當前頁碼
this.currentPage = pageNum
}
}
}
}
</script>
<style lang="less" scoped>
@themeColor: #D93844; // 自定義主題色
.m-pager-wrap {
height: 32px;
line-height: 30px;
font-size: 14px;
color: #888;
text-align: center;
.u-text {
margin-right: 5px;
}
.u-item {
margin-right: 5px;
min-width: 30px;
display: inline-block;
user-select: none; // 禁止選取文本
border: 1px solid #d9d9d9;
border-radius: 4px;
cursor: pointer;
&:hover {
.active();
}
}
.active {
color: #fff;
background: @themeColor;
border: 1px solid @themeColor;
}
.disabled {
color: rgba(0,0,0,.25);
&:hover {
cursor: not-allowed;
color: rgba(0,0,0,.25);
background: #fff;
border: 1px solid #d9d9d9;
}
}
.txt {
padding: 0 6px;
}
.u-ellipsis {
display: inline-block;
width: 12px;
padding: 0 8px;
margin-right: 5px;
cursor: pointer;
&:hover {
color: @themeColor;
}
}
.u-jump-page {
margin: 0 8px 0 3px;
input {
width: 32px;
height: 20px;
padding: 5px 8px;
margin: 0 5px;
border: 1px solid #d9d9d9;
border-radius: 4px;
text-align: center;
}
}
}
</style>
②在要使用的頁面引入分頁器：
<div class="m-page">
<Pager
@changePage="jumpPage"
:totalCount="totalCount"
:pageNumber="queryParams.p"
:pageSize="queryParams.pageSize" />
</div>
import Pager from '@/components/Pager'
components: {
Pager
}
totalCount: 0,
queryParams: {
pageSize: 10,
p: 1,
mod: 'search'
},
jumpPage (e) {
this.queryParams.p = e.currentPage
this.queryParams.pageSize = e.currentSize
this.getDataLists() // 調用接口獲取列表數據
}
.m-page {
margin: 30px auto 60px;
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。