Vue分頁器組件使用方法詳解

更新時間：2022年03月03日 17:59:44 作者：theMuseCatcher

這篇文章主要為大家詳細(xì)介紹了Vue分頁器組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue分頁器組件的使用，供大家參考，具體內(nèi)容如下

效果圖如下：

鼠標(biāo)懸浮時切換為箭頭：

①創(chuàng)建自定義分頁組件Pager.vue：預(yù)設(shè)主題色為@themeColor: #D93844; 每頁展示10條數(shù)據(jù)，一次最多顯示5個頁碼，支持輸入頁碼跳轉(zhuǎn)：

<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">&middot;&middot;&middot;</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">&middot;&middot;&middot;</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, // 當(dāng)前頁碼
? ? ? currentSize: this.pageSize, // 分頁數(shù)
? ? ? jumpNumber: '', // 跳轉(zhuǎn)的頁碼
? ? ? forwardMore: false, // 左箭頭展示
? ? ? backwardMore: false // 右箭頭展示
? ? }
? },
? props: {
? ? pageNumber: { // 當(dāng)前頁面
? ? ? type: Number,
? ? ? default: 1
? ? },
? ? pageSize: { // 每頁顯示數(shù)量 [10條/頁 20條/頁 30條/頁 40條/頁]
? ? ? type: Number,
? ? ? default: 10
? ? },
? ? totalCount: { // 總條數(shù)
? ? ? type: Number,
? ? ? default: 0
? ? },
? ? pageListNum: { // 顯示的頁碼數(shù)組長度
? ? ? type: Number,
? ? ? default: 5
? ? }
? },
? computed: {
? ? totalPage () { // 總頁數(shù)
? ? ? return Math.ceil(this.totalCount / this.currentSize) // 向上取整
? ? },
? ? pageList () { // 獲取顯示的頁碼數(shù)組
? ? ? return this.dealPageList(this.currentPage)
? ? }
? },
? watch: {
? ? currentPage (to, from) {
? ? ? // 通過更改當(dāng)前頁碼，修改分頁數(shù)據(jù)
? ? ? this.$emit('changePage', { currentPage: to, currentSize: this.currentSize })
? ? }
? },
? created () {
? ? // 監(jiān)聽鍵盤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
? ? ? }
? ? ? // 生成要顯示的頁碼數(shù)組
? ? ? for (let i = pager.start; i <= pager.end; i++) {
? ? ? ? resList.push(i)
? ? ? }
? ? ? return resList
? ? },
? ? onEnterForward () {
? ? ? this.$refs.forward.innerHTML = '&laquo;'
? ? },
? ? onLeaveForward () {
? ? ? this.$refs.forward.innerHTML = '&middot;&middot;&middot;'
? ? },
? ? onEnterBackward () {
? ? ? this.$refs.backward.innerHTML = '&raquo;'
? ? },
? ? onLeaveBackward () {
? ? ? this.$refs.backward.innerHTML = '&middot;&middot;&middot;'
? ? },
? ? 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 = '' // 清空跳轉(zhuǎn)輸入框
? ? },
? ? changePage (pageNum) {
? ? ? if (this.currentPage !== pageNum) { // 點(diǎn)擊的頁碼不是當(dāng)前頁碼
? ? ? ? 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() // 調(diào)用接口獲取列表數(shù)據(jù)
}
?
.m-page {
? margin: 30px auto 60px;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: