基於 bootstrap 的 vue 分頁組件

時間 2019-11-20

原文原文鏈接

基於 bootstrap 的 vue 分頁組件，我想會有那麼一部分同窗，在使用Vue的時候不使用單文件組件，由於不架設 NodeJS 服務端。那麼網上流傳的 *.vue 的各類分頁組件可能沒法使用的，我這裏提供一個 *.js 的分頁組件，下午剛寫的，但願對你們有所幫忙，歡迎下載。css

下面是如何使用的示例代碼：html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8" />
    <title>基於 bootstrap 的 vue 分頁組件 - 演示</title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div id="app" class="container">
        <br />
        <h4>基於 bootstrap 的 vue 分頁組件 - 演示</h4>
        <!-- 注：showListBar、showIndexBar 兩個屬性是可選項，注：="true" 實際上是能夠省略的 -->
        <!-- 注：pageSize,barSize,pageSizeList 三個屬性是可選項 -->
        <pager show-list-bar :show-index-bar="true"
               :page-size="30" :bar-size="10" :page-size-list="[1, 15, 25, 30]"
               :total="1024" v-model="xxx" @change="pagechange();"></pager>
        <!-- 注：total、v-model、change基本上來講，算是必選項了 -->
        <hr />
        當前頁: {{ xxx }}
    </div>
    <script src="Scripts/vue-2.5.2.min.js"></script>
    <script src="Scripts/vue-pager-1.0.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: function () {
                return {
                    xxx: 1,
                }
            },
            methods: {
                //翻頁事件
                pagechange: function () {
                    console.log("翻頁了：", this.xxx);
                },
            }
        });
    </script>
</body>
</html>

組件的代碼以下：vue

// 基於 bootstrap 的分頁組件 by 周遊 
// vue-pager-1.0.js
Vue.component('pager', {
    model: {
        prop: 'pageIndex',
        event: 'change'
    },
    props: {
        "total": { required: true, type: Number },   //總記錄數
        "pageSize": Number,        //頁大小
        "barSize": { type: Number, default:10 },         //頁碼器上，一次顯示幾頁
        "pageIndex": { required: true, type: Number},       //當前頁 (v-model)
        "pageSizeList": { type: Array, default: [10, 20, 30, 50, 100] },  //每頁顯示多少條的數組
        "showListBar": { type: Boolean, default: false },    //顯示「每頁 X 條」欄
        "showIndexBar": { type: Boolean, default: true },   //顯示「第幾頁/共幾頁」欄
    },
    data: function () {
        return {
            pindex: 1,     //當前頁
            psize: 10,     //頁大小
        }
    },
    computed: {
        //總頁數 （計算值）
        pcount: function () {
            return parseInt((this.total - 1) / this.psize) + 1;
        },
        //頁碼集
        indexes: function () {
            //參數修正
            this.pindex = this.pageIndex || 1;
            if (isNaN(this.pindex)) this.pindex = 1;
            if (this.pindex < 1) this.pindex = 1;
            if (this.pindex > this.pcount) this.pindex = this.pcount;
            //求indexes
            var left = 1;
            var right = this.pcount;
            var bcenter = parseInt(this.barSize / 2);
            var ar = [];
            if (this.pcount > this.barSize) {
                if (this.pindex > bcenter && this.pindex <= this.pcount - bcenter) {
                    left = this.pindex - bcenter
                    right = this.pindex + (bcenter - 1)
                        + (this.barSize % 2); //奇數多顯示一頁
                    //console.log("中間的頁", this.pindex);
                } else {
                    if (this.pindex <= bcenter) {
                        left = 1
                        right = this.barSize;
                        //console.log("當前頁是開始幾頁", this.pindex);
                    } else {
                        right = this.pcount;
                        left = this.pcount - (this.barSize - 1);
                        //console.log("當前頁是最後幾頁", this.pindex);
                    }
                }
            }
            while (left <= right) {
                ar.push(left)
                left++
            }
            return ar;
        },
        showLast: function () {
            return this.pindex != this.pcount
        },
        showFirst: function () {
            return this.pindex != 1
        }
    },
    watch: {
        //監視若是 pindex 發生變化，就觸發 change 事件
        pindex: function () {
            this.pageIndex = this.pindex;
            this.$emit('change', this.pageIndex);
        },
    },
    methods: {
        //跳轉頁碼
        go: function (i) {
            if (i < 1 || i > this.pcount) return;
            this.pindex = i;
        }
    },
    template: '<ul class="pagination">\
                    <li :class="{disabled:!showFirst}"><a href="javascript:void(0)" @click="go(1)">第一頁</a></li>\
                    <li :class="{disabled:!showFirst}"><a href="javascript:void(0)" @click="go(pindex-1)">上一頁</a></li>\
                    <li v-for="i in indexes" :class="{active:i==pindex}"><a href="javascript:void(0)" @click="go(i)">{{ i }}</a></li>\
                    <li :class="{disabled:!showLast}"><a href="javascript:void(0)" @click="go(pindex+1)">下一頁</a></li>\
                    <li :class="{disabled:!showLast}"><a href="javascript:void(0)" @click="go(pcount)">第末頁</a></li>\
                    <li v-if="showListBar" class="form-inline"><span>每頁 \
                    <select class="form-control" v-model.number="psize" \
                    style="padding:0 0px;height:18px;width:48px;text-align:center;margin-top:-4px;" >\
                    <option v-for="ps in pageSizeList">{{ ps }}</option>\
                    </select> 條</span></li>\
                    <li v-if="showIndexBar" class="form-inline"><span>第 <input v-model.number="pindex" type="text" class="form-control" style="padding:0;height:18px;width:42px;text-align:center;margin-top:-4px;" /> 頁 / 共{{pcount}}頁</span></li>\
            </ul>',
    created: function () {
        this.psize = this.pageSize || this.psize;
        //一進來就觸發 change 事件
        this.$emit('change', this.pageIndex);
    }
});