采用Vue2.0開發的分頁js組件


2017-11-17 19:14:23

基於jQuery的分頁插件相信大家伙已經都用過很多了,今天分享一下基於Vue2.0的分頁插件pagination.js

由於項目需求,要求使用 Vue2.0 開發一套有關分頁的組件 

這款 pagination.js 組件,可以按照各自需求定制,以下代碼可以直接復制引入項目中

// 1、Vue寫的分頁有兩個參數         

// pages:總頁數,pageNo:當前頁

// 直接上代碼,考慮到兼容 IE 等瀏覽器,其中 template 直接使用字符串拼接方式

 1 /**
 2  * author: tyd
 3  * createTime: 2017/11/13
 4  * title: 分頁組件
 5  */
 6 var pageComponent = Vue.extend({
 7     template: '<nav aria-label="Page navigation">'+
 8                     '<ul class="pagination">'+
 9                         '<li :class="{\'disabled\':curPage==1}">'+
10                            '<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">'+
11                                 '<span aria-hidden="true">上一頁</span>'+
12                            '</a>'+
13                        '</li>'+
14                        '<li v-for="page in showPageBtn" :class="{\'active\':page==curPage}">'+
15                             '<a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>'+
16                              '<a href="javascript:;" v-else>···</a>'+
17                        '</li>'+
18                        '<li :class="{\'disabled\':curPage==pages}">'+
19                            '<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">'+
20                                    '<span aria-hidden="true">下一頁</span>'+
21                            '</a>'+
22                         '</li>'+
23                         '<li :class="{\'disabled\':pages==pages}">'+
24                            '<a href="javascript:void(0);">'+
25                                     '共  {{pages}} 頁'+
26                            '</a>'+
27                        '</li>'+
28                    '</ul>'+
29                '</nav>',
30     // 用戶組件傳遞數據            
31     props: {
32         pages: {
33             type: Number,
34             default: 1
35         },
36         current: {
37             type: Number,
38             default: 1
39         }
40     },
41     data:function (){
42         return{
43             curPage:1
44         }
45     },
46     computed: {
47         // 顯示分頁按鈕
48         showPageBtn:function() {
49             let pageNum = this.pages; // 總頁數
50             let index = this.curPage; // 當前頁
51             let arr = [];
52             if (pageNum <= 6) {
53                 for (let i = 1; i <= pageNum; i++) {
54                     arr.push(i)
55                 }
56                 return arr
57             }
58             // 對頁碼顯示進行處理,動態展示
59             if (index <= 3) return [1, 2, 3, 4, 0, pageNum];
60             if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
61             if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum];
62             if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
63             return [1, 0, index - 2,index - 1, index, index + 1, index + 2, 0, pageNum];
64         }
65     },
66     methods: {
67         goPage:function(page) {
68             if (page != this.curPage) {
69                 console.log(page);
70                 this.curPage = page;
71                 this.$emit('navpage', this.curPage);
72             }else{
73                 console.log('Already in the current page');
74             }
75         }
76     }
77 });
78 Vue.component('navigation', pageComponent); // 注冊組件

// 2、簡單的演示 Html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue2.0分頁組件</title>
 6         <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
 7         <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
 8         <!-- 引入外部的 pagination.js 組件即可 -->
 9         <script type="text/javascript" src="pagination.js"></script>
10     </head>
11     <body>
12         <div id="app" class="text-right" style="text-align: center;">
13             <navigation :pages="pages" :current.sync="pageNo" @navpage="pageList"></navigation>
14         </div>
15         <script type="text/javascript">
16             new Vue({
17                 el: "#app",
18                 data: {
19                     pageNo: 1,
20                     pages: 100
21                 },
22                 methods: {
23                     pageList:function(curPage) {
24                         //根據當前頁獲取數據
25                         this.pageNo = curPage;
26                         console.log("當前頁:" + this.pageNo);
27                     }
28                 }
29             })
30         </script>
31     </body>
32 </html>

 演示:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM