vue自定義分頁組件案例

自定義bootstrap3的分頁組件

<template>
    <nav class="pagination-nav">
        <ul class="pagination">
            <li :class="{'disabled': currentPage<=1}"><a href="javascript:;" @click="currentPage=1">首頁</a></li>
            <li :class="{'disabled': currentPage<=1}"><a href="javascript:;" @click="prev"><span>?</span></a></li>
            <li v-for="i in pageList" :key="i" :class="{'active': currentPage == i}">
                <a href="javascript:;" v-text="i" @click="changePage(i)"></a>
            </li>
            <li :class="{'disabled': currentPage>=pageTotal}"><a href="javascript:;" @click="next"><span>?</span></a></li>
            <li :class="{'disabled': currentPage>=pageTotal}"><a href="javascript:;" @click="currentPage=pageTotal">末頁</a></li>
        </ul>
        <div class="pagination-other">
            <span v-if="showJumper">
                <span>到第</span>
                <input type="number" class="page-input" v-model="currentPageInput">
                <span>頁</span>
                <button type="button" class="page-btn" @click="jump">確定</button>
            </span>
            <span v-if="showSizes">
                <span v-text="total"></span>
                <span>條, 共</span>
                <span v-text="pageTotal"></span>
                <span>頁</span>
                <select v-model="pageSize_" class="page-limit">
                    <option v-for="(item, i) in pageSizeList" :key="i" :value="item">
                        <span v-text="item"></span>
                        <span>條/頁</span>
                    </option>
                </select>
            </span>
        </div>
    </nav>
</template>

<script>
export default {
    name: 'basicPagination',
    data() {
        return {
            // 當前頁
            currentPage: 1,
            // 當前頁輸入框
            currentPageInput: 1,
            // 每頁顯示條目數
            pageSize_: 10,
            // 總頁數
            pageTotal: 0,
            // 頁碼列表
            pageList: [],
            // 當前頁碼前后間隔數
            breakPageNum: 0,
            // 額外頁碼數
            otherPage: 0,
            // 每頁顯示頁碼數
            pageListCount_: 5
        }
    },
    props: {
        page: {
            default: 1
        },
        pageSize: {
            default: 10
        },
        total: {
            default: 0
        },
        pageSizeList: {
            default: function() {
                return [10, 15, 20, 25, 30]
            }
        },
        pageListCount: {
            default: 5
        },
        showJumper: {
            default: false
        },
        showSizes: {
            default: false
        }
    },
    methods: {
        render(beginPage) {
            // 當總記錄數小于顯示頁碼數時, 將調整顯示頁碼數為總記錄數
            if (this.pageTotal <= this.pageListCount_) {
                this.pageListCount_ = this.pageTotal
                this.pageList = []
            }
            for(var index = beginPage, i = 0; i < this.pageListCount_; index++, i++) {
                this.pageList[i] = index
            }
        },
        changePage(page) {
            // 當前頁切換
            this.currentPage = page
        },
        jump() {
            // 跳轉頁面
            if (this.currentPageInput > this.pageTotal) {
                this.currentPageInput = this.pageTotal
            } else if (this.currentPageInput < 1) {
                this.currentPageInput = 1
            }
            this.currentPage = this.currentPageInput
        },
        next() {
            // 下一頁
            if (this.currentPage < this.pageTotal) {
                this.currentPage++
            }
        },
        prev() {
            // 上一頁
            if (this.currentPage > 1) {
                this.currentPage--
            }
        },
        getBreakPageNum() {
            // 計數當前頁碼前后間隔數
            this.breakPageNum = parseInt(this.pageListCount / 2)
            // 如果每頁顯示的頁碼數是偶數的話則添加額外1個頁碼, 用于彌補偶數pageSize不顯示最后一個頁碼的bug
            this.otherPage = this.pageListCount % 2 == 0 ? 1 : 0
        },
        totalInit() {
            // 當total有值時將開始計算頁碼數
            this.pageTotal = Math.ceil(this.total / this.pageSize_)
            this.getBreakPageNum()
            let beginPage = this.currentPage - this.breakPageNum < 1 ? 1 : this.currentPage - this.breakPageNum
            this.render(beginPage)
        }
    },
    watch: {
        page() {
            this.currentPage = this.page
        },
        currentPage() {
            // 當前頁修改時觸發
            this.currentPageInput = this.currentPage
            if (this.currentPage > this.breakPageNum) {
                if (((this.pageTotal + this.otherPage) - this.breakPageNum) >= this.currentPage) {
                    let beginPage = this.currentPage - this.breakPageNum
                    this.render(beginPage)
                } else if ((this.currentPage + this.breakPageNum) >= this.pageTotal && this.currentPage <= this.pageTotal) {
                    let beginPage = this.pageTotal - (this.pageListCount_ - 1)
                    this.render(beginPage)
                }
            } else {
                this.render(1)
            }
            // 當前頁修改時觸發自定義事件
            this.$emit('changePage', this.currentPage)
        },
        pageSize() {
            this.pageSize_ = this.pageSize
        },
        pageSize_() {
            // 顯示頁碼數修改時觸發
            this.pageTotal = Math.ceil(this.total / this.pageSize_)
            this.pageListCount_ = this.pageTotal <= this.pageListCount_ ? this.pageTotal : this.pageListCount
            let beginPage = 1
            if (this.currentPage + this.breakPageNum >= this.pageTotal) {
                beginPage = this.pageTotal - (this.pageListCount_ - 1)
                beginPage = beginPage <= 1 ? 1 : beginPage
            } else if (this.currentPage - this.breakPageNum <= 1) {
                beginPage = 1
            } else {
                beginPage = this.currentPage - this.breakPageNum
                beginPage = beginPage <= 1 ? 1 : beginPage
            }

            if (this.currentPage >= this.pageTotal) this.currentPage = this.pageTotal
            this.render(beginPage)
            this.$emit('changePageSize', this.pageSize_)
        },
        total() {
            // 重置每頁顯示頁碼數
            this.pageListCount_ = this.pageListCount
            this.totalInit()
        }
    },
    created() {
        this.total && this.totalInit()
                this.pageSize_ = this.pageSize
    }
}
</script>

<style scoped>
.pagination-nav {
    display: table;
    vertical-align: middle;
}
.pagination-other {
    display: table-cell;
    vertical-align: middle;
    padding-left: 8px;
}
.page-input {
    width: 45px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #CCC;
    transition: all .3s;
    outline: none;
}
.page-btn {
    border: 1px solid #CCC;
    background-color: #FFF;
    padding: 1px 6px;
    border-radius: 3px;
    outline: none;
}
.page-limit {
    cursor: pointer;
    padding: 2px 6px;
    vertical-align: middle;
    font-size: .9em;
}
</style>

文檔

• 屬性值Props
  page: 當前頁碼數, 默認: 1, 支持.sync
  pageSize: 每頁顯示條目數, 默認: 10
  total: 總條目數, 默認: 0
  pageSizeList: 可用于更換pageSize的列表, 默認: [10, 15, 20, 25, 30]
  pageListCount: 顯示多少頁碼數, 默認: 5
  showJumper: 顯示頁碼跳轉器, 默認: false
  showSizes: 顯示每頁顯示條目數修改器, 默認: false

• 方法
  changePage: 當當前頁被修改時觸發, 回調參數: currentPage
  changePageSize: 當每頁顯示條目數被修改時觸發, 回調參數: pageSize

• 注意事項
• props定義之后, 不可被修改, 要修改則映射到data中再修改